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.
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'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!
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 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">
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 :-)