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.
Related
When I provide cnd link:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
Then its showing icons and working fine.
Here is code jsfiddle
When I copy and host the same css file locally then its not working
Here is example jsfiddle code
Why its not working when I host locally? Is there any restrictions or license problem?
Thanks
I guess you are using a CDN network instead of Font Awesome's kit code. If that's the case, I'd recommend you using the Kit code of your kit. That'll help you in showing icon on your site, locally or hosted doesn't matter.
The fix I found is to save this css file locally and edit it. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
Find url and replace ../ to ../../ because my web font folder location was assets/webfonts not root
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 wanna use the font awesome icons offline in webpage but it is not happening dont know the exact reason as my code goes here
<html>
<head>
<title>font-awesome example</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
</head>
<body>
this is example about font-awesome<i class="fa fa-bell"></i>
<br>
this is not working
</body>
</html>
please any one put me on right way to get font awesome on my page
Have you downloaded the fonts folder as well?
All the font awesome icons are included in font files which the browser expects to find in a directory called 'fonts'.
If you've only included the css file the page won't find the actual fonts and the icons won't load.
I faced similar issues. I realized I just went straight to copying the target CSS file path front the font awesome icons which doesn't display. Just the box outline.
Solution is copying the whole folder you extracted after download to your work (HTML/CSS) portfolio and access the target fontawesome.CSS or all.CSS file using the './' file path access. It will work like it's online. Good luck.
The /css/all.css file contains the core styling plus all of the icon styles that you’ll need when using Font Awesome. The /webfonts folder contains all of the typeface files that the above CSS references and depends on.
Copy the entire /webfonts folder and the /css/all.css into your project’s static assets directory (or where ever you prefer to keep front end assets or vendor stuff).
Add a reference to the copied /css/all.css file into the of each template or page that you want to use Font Awesome on.
visit - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
I'm just transferring all my files over from xampp's htdocs to my server and now I just need to add a favicon.
I have the icon saved as 'favicon1.ico' and it is a proper icon size 16x16, but I cant get it to work.
This is the code I have for it:
<html>
<title>Server Test</title>
<head>
<h1> Hello World </h1>
<link rel="shortcut icon" href="O:\Intranet\favicon1.ico"/>
</head>
<body>
</body>
</html>
That is the correct location of the icon in the href so I dont see why this shouldn't work.
I've never added a favicon to a site before so that is where my main problem of not knowing exactly what it should look like lies.
Your Favicon path uses a windows style File path as pointed out in the comments.
Ensure the following
favicon1.ico file is present in the package that you are transferring onto the server.
Ensure that the file is accessible over http (try using a browser to navigate to it). The path should be something like http://server:port/app-uri/favicon1.ico
After that as suggested in one of the comments use a relative path such as ./favicon1.ico in the HTML source.
Also I suggest reading up on the concept of favicon http://www.w3.org/2005/10/howto-favicon
Code below should work. Try this.
<link rel="icon" type="image/png" href="http://yoursite.com/favicon1.ico">
Notice that href points to the address of your icon depending where you put the icon.
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