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>
Related
I want to show user circle icon, I have download a font-awesome css file with version 4.7.0.
But this is not working for me. If I use cdn then its working. I am not getting what is the issue in downloaded file.
Here my code:
<html>
<head>
<link href="font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<i class="fa fa-user-circle-o"></i>
</body>
</html>
Does anyone know what is the issue?
There is no problem with body part of HTML. Surely, it has to be with font-awesome.min.css or its path.
There are two ways to go about this problem:
font-awesome.min.css may not loaded along with your HTML. Check in network tab of chrome DevTools. The path you have provided indicates chrome to look for the CSS file in same directory as the HTML file.
Alternatively, you can provide cdn link for font-awesome.min.css, if you dont want to maintain the CSS by yourself. For this, change link tab in head to below:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
You have to host the font files too. Go to the fontawesome website and read the related documentation.
Font awesome get started
As you can understand from it's name, Font-Awesome has cool font-based approach to use icons. So, including CSS file is not enough. If you want to store your CSS file locally, you should store font files too.
As documented, you should have entire folder (including fonts folder which includes woff, tff etc) on your server.
Copy the entire font-awesome directory into your project.
In the of your html, reference the location to your font-awesome.min.css.
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.
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 have got a website built in CakePHP and hosted on http://thecontrolist.azurewebsites.net. I am using git to update this website. I am using Coco theme which uses Fontello, Font-Awesome and a few other to create CSS icons in admin panel. When I pushed my work first time, the font's wont show on the live server however they show fine on my localhost/wamp server.
I thought there would have been some kind of file corruption while pushing font files through git. Hence I decided to upload font files in Fontello and Font-awesome using FTP. I hard refreshed and it worked. However, after some time it again stopped working.
I add the entire libs directory of the theme to gitignore list and uploaded all fonts in question using FTP once gitignore had been pushed. But it didn't fix the issue and fonts have stopped showing up again, so the gitignore didn't help. Any ideas what's going on?
Following the code:
<link rel="stylesheet" type="text/css" href="/theme/coco/libs/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/theme/coco/libs/fontello/css/fontello.css" />
And you can view the files from linked. One thing I am very sure about is that when I reupload files using FTP and refresh it works but then it stops working automatically after some time so it does not seem like a font filepath issue.
Just don't use buggy fonts. Use more stable fonts like font-awesome.
I'm trying to use Font-Awesome icon fonts via the BootstrapCDN link which I'm pretty sure I have the latest version of:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
I've put this link in the <head> part of my html file and I am trying to get it to work with this simple html code of:
<!DOCTYPE html>
<html>
<head>
<title>Font-Awesome Icons</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>
However it's not rendering. I've tried this code in the latest versions of FireFox (27), Safari(7) and Chrome(33). I've checked that the fa class is on each of the icons I'm trying to call up and also that the fa- prefix is being used as opposed to the old icon- prefix. I've checked my implementation of the code with this video http://headwaythemes.com/using-font-awesome-with-headway/ (although meant for a WordPress theme, in principal the code should work the same) and looked around on stack overflow but previous questions like Fontawesome not loading haven't yielded me any help in solving my issue.
I don't have the fontawesome.otf installed but surely it isn't that if I can see the glyphs when visiting http://fortawesome.github.io.
Should I just download and host the font-awesome files along with my entire future website so I don't have to worry about updating the BoostrapCDN link as well? - Even though I only plan to use a few icons?
The reason it is not loading is because the URI is starting with "//". That signifies that it is a protocol relative path, meaning it will use whatever protocol that page is using. If you open your html locally, then your browser will use file as the protocol, thus trying to access the font-awesome css with "file://". If you access your html using a local or remote http web server, then you would access the page using the http protocol, thus accessing the css with "http://".
Solution:
Change the path of the css or mimic it on your local machine.
Run a local or remote http server and access the page.
For more info:
URI starting with two slashes ... how do they behave?
Such an easier way to deal with this - just add 'http:' in front for the cdn line, and it will work on your local machine, i.e. like this:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Ta-daa!
What Pulkit answered is absolutely correct. Just to add, if you want to create a quick local server, just go to the directory of the html and css pages, and then go to the terminal and type -
$python -m SimpleHTTPServer
Then, go to your browser and go to 127.0.0.1:8000
If it doesn't show up, try changing the homepage of your website to index.html