All my icons are working except for fa-newspaper-o.
I have it set up as:
<i class="fa fa-newspaper-o fa-fw"> </i>
I am using:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >
Everything else pulls up just fine. Please advise.
Not sure if this was addressed already, but I had the exact same problem and resolved it by making sure only one version of FA was being loaded. I've been using the MediawikiBootstrap skin on a site, which loads its own, older version of FA. Disabled that and loaded newer version with CDN. That particular icon (newspaper) was then showing up without trouble.
Related
I've used the Font Awesome icons before (previous version). Back then, I used a CDN like below in my HTML. But now I can't find it anymore. Is there any change on how to use them?
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
To use the new free Font Awesome 6, you can again use the CDN (if that's your preference) like the following.
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
Then use icons in your HTML like the following.
<i class="fa-solid fa-house"></i>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
add this link in your head of the html file,
and
use a font awesome link for an icon. if the link is like
<i class="fa fa-camera-retro"></i>
you want to use it in your page inside of
<a
tag like
<a><i class="fa fa-camera-retro"></i> fa-camera-retro</a>
It is worth flagging here that whilst yes, the CDN is possible (and you can also download the files and host them locally (https://fontawesome.com/docs/web/setup/host-yourself/webfonts)) these fonts are a limited subset of the "Free plan" version.
For example, fa-envelope-o will come up as a Free icon but if you look in the webfonts or all.css this is not included. However it is if you signup for the free plan (https://fontawesome.com/plans). They will send you a .js link to include however you are limited to 10k connections per month. Which for most sites will be suitable and opens up a much larger selection than the CDN option.
I have nothing to do with FA - just figured out why downloading and hosting the fonts yourself is pointless and you might as well just signup!
I've downloaded font-awesome icons in my project and imported font-awesome.min.css as
<link rel="stylesheet" href="resources/font-awesome/css/font-awesome.min.css">
And used them simply like
<i class="fa fa-user-o" aria-hidden="true"></i>
The stylesheet was loaded so there was no problem with the path.
The icons worked fine in Firefox, but didn't show up in Chrome 61 at all, neither in Win 10 nor Linux, so I guess it has nothing to do with OS.
I don't have any plugin in Chrome that would be conflicting.
I've also tried <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> but nothing changed.
Does anyone know what might cause this problem? Thanks!
I'm having this exact same issue. I tried re-downloading the fonts and the css, rewriting my css into a new file, removing some of the scripts and tags in the head tag and nothing works. It seems to be related to Chrome 61. I was going to report this to the FA's github, but it looks like someone already did.
Forgot to mention, I'm using Polymer. And here is a solution I found.
install polymer-font-awesome with npm:
npm i polymer-font-awesome
add the following dependency to polymer.json:
"extraDependencies": ["node_modules/polymer-font-awesome/dist/fonts/*"]
import these two files:
<link rel="import" href="node_modules/polymer-font-awesome/dist/font-face.html">
<link rel="import" href="node_modules/polymer-font-awesome/dist/font-awesome.html">
include stlye module:
<style type="text/css" include="font-awesome"></style>
Clear the cache in Chrome and it worked for me.
If you have any kind of AdBlock turned on, you need to disable it first.
I also have the same problem that font-awesome icons appear in Firefox but not in Chrome, and I figured out that my Chrome AdBlock blocked it.
Why is my code not showing me the icons ?
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
After reading the answers on this page, I got my own code working by linking to the CDN per other suggestions. What I actually wanted, though, was to add the Font Awesome folder to my project and link to the project file. When I studied the link to the CDN, I noticed that it used a path ending with css/all.css. I noticed that the folder I had downloaded and unzipped included an all.css file along with the fontawesome.css file, which seems to be a change as of -v 5.0. I changed my link from:
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/fontawesome.css">
to:
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css">
And it worked.
I also learned the hard way that the Font Awesome link must be placed above the link to the main.css file for the project.
Had the same problem, where some of the icons showing up as square boxes.
it only happened with a local reference of font awesome to my web app.
when i investigate the URL, i saw that there was also web fonts that needed to be loaded (not only the css file itself):
and than save the web fonts with right click - open new tab:
and move those files into your web-fonts folder. (in my case, i had to overwrite the existing webfonts - this is why it show the square boxes in first place).
and the problem solved!
For Pro users, check that you have an updated CDN link for fontawesome, as of this writing the most recent version is 5.11.2. Updating the cdn link from https://fontawesome.com/account/cdn resolved my issue. Posting an example here with a dummy integrity attribute, do not use this link, you should have your own link with a unique subresource integrity.
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-zrnmn8R8KkWl12rAZFt4yKjxplaDaT7/EUkKm7AovijfrQItFWR7O/JJn4DAa/gx" crossorigin="anonymous">
Not sure what you mean by "the icons are not showing up", but my guess is that you haven't included the CSS file for Font Awesome. You can do so by including this in the <head> of your HTML:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
Use that, with the code you provided, and it works without error.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
If you intend to use a local copy font-awesome in your project files (without going for the web link), instead of coping just the font-awesome file, copy everything on the downloaded font-awesome zip.
For an example font-awesome v4.7 comes with 4 folders (css,fonts,less,scss) and it's there for a reason.
If you look inside the css file (font-awesome.css) you can see it's usages of other files like this.
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
I meet problem that fontawesome Icon does not show up on Chrome. ( Safari and Moz both works fine ). Does anyone have a clew why this happened. Thanks All.
Here is the Snapshot:
I know that the default font path that fontawesome.min.css directs ../font/......, but I have changed path name to " ../fonts/ " for my project, still doesn't work. The icon never shows up.
Check if you have your Adblocker disabled. Sometimes chrome extensions can prevent the browser from showing the icons.
Is bootstrap working? It looks like your Css directory is capitalized which would cause your reference to the css file to not work.
Try replacing
./css/font-awesome.min.css
with
./Css/font-awesome.min.css
As mentioned in the comment on your original question, you could try using the CDN momentarily to see if the icon appears. If the icon does appear using the CDN, you know you have an issue with your path like I have mentioned above.
Here is the html code you would use for the CDN (version 3.2.1):
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
Aside from this, you are also using an outdated version of font-awesome. If possible in your circumstance, I recommend upgrading to the latest version. You can find more information on the latest version by visiting the following link.
http://fontawesome.io/get-started/
If you are going to use the latest version, make sure to look at examples as they have changed the way you write the html code.
Edit after updating Font-awesome:
If you are going to use the latest version of font-awesome, you need to change the HTML code to
<i class="fa fa-times" aria-hidden="true"></i>
CDN for the latest version (4.7):
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
I had a similar issue, and I resolved it with these steps:
Open your font-awesome.min.css file
Search for webfonts, which is the default parent folder name of the fonts. If you found a bunch, then replace each of them with the name of your fonts folder in your project.
...This way, the font references inside your ..min.css points to the correct directory path where your fonts are :)
I found out this out by opening chrome dev tools in incognito mode, and looking at the console errors.
Disable the plugin: "Font Changer with Google Web Fonts™"
I guess it comes as a default tool.
There must be multiple css files.. You should include all.min.css (or) all.css as it works well
Its because you need to provide the exact version of font awesome in the link tag of index.html .
For me it was:
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">
you can also visit https://fontawesome.com/start and search for the exact version you need in your application
I just solved this problem on one of my own sites. Only some of the icons didn't work. fa-pencil and fa-trash, specifically, failed. fa-user-plus and fa-envelope worked fine.
I'm not sure precisely what was messing with it, but one of the other css files (maybe bootstrap) was messing with the FA css. I moved my link to the FA css so it came after the other css links in the page, and it worked. I now have pencil and trash icons.
You should disable adblocking plugins in chrome, they sometimes can mistake Fontawesome icons for advertising.
Just add brand.js, solid.js, fontawesome.js file from your fontawesome folder, it did work for me.
<script defer src="../fontawesome/js/brands.js"></script>
<script defer src="../fontawesome/js/solid.js"></script>
<script defer src="../fontawesome/js/fontawesome.js"></script>
I've seen questions that dealt with not having the "fa" class in addition to the icon class, I've seen 404s that weren't discovered until they checked console, I've seen IIS issues, etc. but none have been my issue. Is there anything that would specifically stop WAMP from allowing FA to render? I can see that the font file was loaded through dev console, I can see CSS being applied to the fa item and nothing's got an override. What I'm seeing if I hover over the element is a square shaped like the item highlighted, but nothing there. I changed the color to make sure it wasn't white-on-white but nothing shows. If I change the :before content to "Hello" I can see it written in a strange font. That's about all I can think to provide, any help would be appreciated.
In my header:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
And my icon:
<i class="fa fa-envelope-open-o" aria-hidden="true"></i>
Are you using https in WAMP? If not, then you are going to get security warnings since you are using https in the font awesome href. Try changing it to the following so it will be protocol independent and see if that works.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">