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 :-)
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.
Font awesome 5.13.0 not showing icon when including only all.css in gulp project but when i include all.js as well it displays the icon but the i tags are converted into svg. Need help please.How can i make it work without converting it to svg.
Folder structure:
this is how i've included fontawesome
I checked file in dest folder as well and the fontawesome css are present n that fiile.
but the cons are not being dislayed.
updated folder structure
how it should be displayed
How it is being displayed
Here's a working sample with CSS only. If it doesn't work for you, please provide more details.
<link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet"/>
<i class="fas fa-plus"></i>
Found the issue. Actually i was just adding webfonts folder to assets folder but i missed to add a gulp task to migrate the files of webfonts folder. So the all.css file was unable to find the webfonts files and thus the icons were not showing up.
Take away here for me (as well as who don't know about this dependency)-
The in addition to all.css, files in webfonts folder is also also required in order for font awesome to work as expected
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.
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');