I am using font awesome on my JSP project, I am using the following import:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
The icons are showing up as square boxes, here is a example:
Its a little hard to see but you can still see the boxes
Thanks for reading, any assistance is appreciated.
(Using Apache Tomcat 9)
Related
I'm using the web font for Bootstrap Icons, and most of my icons are working, but there are a few which are listed on the website that don't seem to be included in the web font. These include: bi-envelope-plus,bi-quote and bi-mortarboard. I'm using the CDN from https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css and including them as follows:
<i class="bi bi-envelope-plus"></i>
Are some of the icons not included in the web font, or am I going crazy? The website provides the syntax to use them with the web font.
Use the latest CDN from Bootstrap site
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
Working Example
I got a client and She was looking for a WordPress website. I took the project and started the project on my server. Yesterday I completed the project and transfer the whole website to my client main domain which is gulugalmarketing.com.
Everything was working just fine on my server! but when I transferred the website I got an issue which is Font awesome icons are loading properly! AS you can see the website is showing a small square box instead of icons.
I tried to check out the console and it's giving the errors.
"Access to Font at been blocked by CORS policy"
I did try t replace the HTTPS to HTTP by using a plugin which is "Better search replace" but no luck as my client is using SSL.
Can somebody check this issue out and let me know.
Include Font awesome CSS link in your document file and then it works
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>
You should enqueue Font Awesome into your theme's function.php, like below:
// Load Font Awesome
function enqueue_font_awesome() {
// Font Awesome
wp_enqueue_style ('fontawesome', 'https://use.fontawesome.com/releases/v5.2.0/css/all.css');
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
I am running in a problem here. There are some bootstrap font awesome icons which are not working with the downloaded CSS but working with the same external CDN. Many are working but some are not working like fa-copyright, fa-credit-card-alt etc. For example:
Its working with
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
But not working when replace with
<link rel="stylesheet" href="css/font-awesome.min.css">
even though I copy the content of external CSS and replace with the contents of font-awesome.min.css in my css/ directory. Please help me.
try this:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
or
<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
or
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
You also need to download the fonts themselves as well...It is a font, like any other...So, go to fontawesome website, follow the instructions and download css + fonts.
It not work, that just the css. You need the font files of font-awesome too, and put them in a folder called fonts. The font files are:
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
And you need the lastest versione too (4.7 i think) or you can't use some of the icons. Just go to their website and download it.
I came across the same problem. The version of FontAwesome I was using was outdated. I updated to use 4.7 and everything worked smoothly.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
So I am developing a site at http://www.johnkimwell.com/Vetel/ and one problem I have is that the font awesome icon is not loading and is only showing a square. I checked everything including the css and I dont see any possible conflict.
I hope you guys can help me out.
Thank you
Strange, indeed. I checked out your website and I found out that you are using FA v. 4.2.0, most of my websites use 4.7.0 so before doing anything else, replace your link element for font-awesome.css for this :
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Perhaps you are using a too old version. Other than that, I checked your headers, console log, everything seems fine.
Hope it helps!
The .fa::before class from Font Awesome appears to be overridden by simple-line-icons. I unchecked the first property in the image below, causing the search icon to be displayed. If you are not using simple-line-icons, the easiest fix would be to get rid of
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
Image of how I fixed the issue
I'm going crazy with this issue. I want to show 8 icons on a page, but only 4 of them are showing up. I have looked up this for help, but I got nothing useful. I checked also on StackOverflow but didn't get anything useful either.
The full code is here.
And this is how I see the icons:
I get this in localhost and uploaded it to altervista. I get this with Chrome, Firefox and Vivaldi. I get this with local fa files and with the CDN. The icons that aren't visible are missing the :before but I don't know why. Can someone help me?
You are using icons (e.g. fa-thermometer-half or fa-free-code-camp), which were introduced in version 4.7. However in your website, version 4.6.3 of FontAwesome is included (see here). So, update your FontAwesome instance to the newest version to solve your problem.
In my case the problem was that in CSS I was doing:
.icon:before {
font-family: "Font Awesome";
}
while it should be:
.icon:before {
font-family: "Font Awesome 5 Free";
}
Getting even a single character different causes some of the icons to disappear. Terrible thing.
Hope this helps.
Please use the latest version of Font Awesome or copy this code into your head section.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
You can replace your existing link to Font Awesome CSS using this CDN provided by Bootstrap CDN, and see the magic.
CDN: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css