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');
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 had installed the font-awesome free version in my pc and tried to run, using a icon in my page,but this doenst work. I'm using a local link to load the font-awesome css,not taking directly from the web. My font-awesome is free version 5.15.2
<link rel="stylesheet" href="node_modules/#fortawesome/fontawesome-free/css/fontawesome.css">
<link rel="stylesheet" href="node_modules/#fortawesome/fontawesome-free/css/fontawesome.min.css">
Here is the icon I'm trying to use
<i class="fas fa-paw"></i>
Have you inserted the webfonts folder in your website?
You will have something like that:
CSS
bootstrap.css
JS
bootstrap.js
webfonts
all the font awesome web fonts are here.
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 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>
Dear fellow designers/developers
I have created 8 extra glyphicons for my bootstrap website. Uploaded them to icomoon and downloaded them as font, this all works perfect.
I am able to add my font to my CSS and use it in HTML withou any problem, but I want to use the font as extra Glyphicons.
How can I do this?
refer to this website which provides the font icons to bootstrap
Font-Awesome
download fontawesome here fontawesome.io
add css file link to your page
<link href='/path/to/font-awesome.css' rel='stylesheet'/>
use css classes mentioned in font-awesome.css stating with 'fa-'
example: <i class="fa fa-desktop"></i>
please copy css and fonts folders to same folder
Steps to use font-Awsome
Download Font-Awsome
Extract .zip file
after extracting, you will get folder i.e. font-awesome-4.5.0
Add this folder by drag and drop to your content or bootstrap folder
Add font-awesome.css file as a reference in your web-page
<link href="~/Content/font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet" />
get icons as told by #G Ravinder i.e.
<i class="fa fa-desktop"></i>
<span class="fa fa-desktop"></span>
That's all :-)