Why fontawesome icon class is different
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<i class="fa fa-edit"></i>
<i class="fas fa-pencil"></i>
<i class="fab fa-facebook"></i>
The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
Please Refer to this
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
Chek out Font Awesome DOCS:
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
This image has all the informations about prefixes so there is really nothing more to add :)
Font Awesome 5.10.0+ has duotone icons with new prefix fad.
I will give answer according to your code only.
Font awesome is an amazing easy to use icon library.
The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
'fa' alone means font awesome. It is no longer used. But I use it with previous link I have my earlier web creations and it works fine.
fas: font awesome solid. It is also free to use.
fab: font awesome brands. Free to use
Rest of the styles everyone above is talking about are: regular (far), light (fal) and duotone (fad) are all pro versions. They are paid.
Further information can be found on: https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use
I hope I have explained with details.
FONT AWESOME 6
In Font Awesome 6 you have new styles and new classes:
More details: https://fontawesome.com/docs/web/setup/upgrade/whats-changed#full-style-names
Related
I am using font-awesome with Angular 5 for my UI. Since I am using sass, I added the following line in .angular-cli.json after installing font-awesome
"styles": [
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/bootstrap/scss/bootstrap.scss",
"styles.scss"
],
Some of the icons works such as
<i class="fa fa-money blue-text"></i>
<i class="fa fa-code blue-text"></i>
However a lot more does not. For example, I wanted to use this bar chart icon with fas fa-chart-bar, but it does not show anything. Things like fas fa-camera-retro only shows as a weird square instead of the actual icon.
Why some of the icons don't work? Is there way to check if these css classes exist in the font-awesome package I installed?
EDIT
Just searched bar chart in node_modules\font-awesome\css\font-awesome.css and only fa-bar-chart exists, not fa-chart-bar. I have the latest font-awesome when I had it installed (4.7.0). Why does their website says fa-chart-bar. Just got it to work with fa fa-bar-chart. Why it is fa and not fas is beyond me
Just searched bar chart in
node_modules\font-awesome\css\font-awesome.css and only fa-bar-chart
exists, not fa-chart-bar. I have the latest font-awesome when I had it
installed (4.7.0). Why does their website says fa-chart-bar. Just got
it to work with fa fa-bar-chart. Why it is fa and not fas is beyond me
That was changed with the release of FA5, because now there are multiple styles for the icons:
fas: FontAwesome solid
far: FontAwesome regular
fab: FontAwesome brands
fal: FontAwesome light
However, FontAwesome5 free has solid only for most icons. For the full experience, you'd have to pay for FontAwesome Pro.
Select any icon in the gallery, to see wich styles are available for it in which release. NB: FA4-icons here.
Worked for me after upgrading to the latest version of Font Awesome:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
You may not use the V5-release of FontAwesome. Just use the latest version of FontAwesome 4, it should work. Use this link
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
I had the same issue. The search page for icons I found with Google was outdated. Make sure you are searching on the last version of the site.
Like you, I found this icon :
<i class="fa fa-line-chart"></I>
It was not working. If you search on the website, you will see it is :
<i class="fas fa-chart-line"></i>
I had to do this one time. I think some mobile devices didn't load one of the fonts:
font-family: "Font Awesome 5 Free", "FontAwesome";
the syntax that worked for me is fas fa-chart-bar https://fontawesome.com/icons/chart-bar?style=solid
this is with the following versions:
bootstrap/4.4.1/css/bootstrap.min.css
font-awesome/4.7.0/css/font-awesome.min.css
I'm using the current version of bootstrap and the current version of font aweson.
Unfortunately, only some icons are displayed, some others not:
working are e.g. fa-envelope, fa-facebook, ...
NOT working is e.g. fa-address-book
Here is the snippet of the html code:
<ul>
<li>
<i class="fa fa-address-card-o" aria-hidden="true"></i>
</li>
</ul>
Why is especially fa-address-book not shown?
How can I fix the problem?
Thank you very much!
font-awesome has a css file that contains fa classes. So only updated font not worked with new icons and you must update css files of font-awesome.
You must be updating your css font to contains new icons like fa-address-book:
https://andreas-peter.de/font-awesome/css/font-awesome.min.css
font-awesome current css file that contains fa-address-book: http://fontawesome.io/assets/font-awesome/css/font-awesome.css
you supposed to use like this
<i class="fa fa-address-book" aria-hidden="true"></i>
more on http://fontawesome.io/icons/
Here are some steps to follow:
Update the font-awesome.css file; the older version's CSS may not contain new fonts.
Also update files inside your font folder. Download font awesome
Ctrl+Shift+R to hard-refresh your page
If I inspect on the little bird icon on twitter.com I see that its css has content: "/f179". Is this for twitter's icon? Is this for a special font with lots of special characters including twitter's icon?
Please use below code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
Add above link in head section of page and following code use for twitter icon on your page..
<i class="fa fa-twitter" aria-hidden="true"></i>
They turn SVG icons into a font, and use unicode to stand for it. This kind of font can be made by yourself in iconmoon or simply using font-awesome.
I've been scouring the web, and I can't find an answer to this. Is there away to add two Font Awesome icons in one i tag?
I can do it if I put two i tags side by side, like this:
Good for: <i class="fa fa-male fa-2x"></i><i class=" fa fa-female fa-2x"></i>
So is there anyway to do this?
Glyph-based fonts like this generally function by changing the content of the element to a specific value, which the font picks up and renders as the appropriate glyph.
So it's unlikely that you'll be able to use a single tag to display both of them unless the library provides specific syntax for handling that behavior on it's own (similar to how Font Awesome uses stacking).
This is not possible in a single <i> tag, reason is the way how the glyph identifying classes are applied. For longer or dynamic sequences you can however directly use the icons codes in markup notation:
html: <span class="font-awesome"></span>
css: .font-awesome { font-family: FontAwesome; }
This obviously requires that you load the font as FontAwesome.
I created a fiddler as simple demonstration: https://jsfiddle.net/6ofmn36g/
I do agree though that this is an approach that is somewhat hard to read, though...
With Font Awesome 5, it's possible!
Masking
Combine two icons create one single-color shape, thanks to the power of SVG in Font Awesome 5! Use it with our new Power Transforms for some really awesome effects.
Go through the Masking section in this link.
The below snippet is a small working example taken from their site
<!-- Important : Use the SVG & JS method and reference the Js file, not the CSS file -->
<script src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
<div class="fa-4x">
<i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
<i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
<i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:MistyRose"></i>
</div>
Not possible with current library of FontAwesome. But there are work arounds as arkascha has suggested below.
Additional Info:
Not exactly what you are asking for But I think this will help you, Also future crowd who falls into this thread with the title.
I had answered similar stuff... Here
https://stackoverflow.com/a/36491858/2592042
You can also build a custom icon by using set of icons available in the font-awesome icon set by stacking and aligning them accordingly. Stacked Icons
Example:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-lg">
<i class="fa fa-male fa-stack-1x"></i>
<i class="fa fa-female fa-stack"></i>
</span>
My FontAwesome twitch icon isn't showing. It was completely fine before and now it just randomly disappeared. I haven't changed anything.
Here is my html code:
<div class="text-center center-block" style="margin-top:-40px;"><br/>
<h1>Follow us!</h1>
<i class="fa fa-facebook-square fa-4x"></i>
<i class="fa fa-google-plus-square fa-4x"></i>
<i class="fa fa-twitter-square fa-4x"></i>
<br/>
<i class="fa fa-steam-square fa-4x"></i>
<i class="fa fa-youtube-play fa-4x"></i>
<i class="fa fa-twitch fa-4x"></i>
</div>
I don't understand why it randomly disappeared. I have the latest Font Awesome and have included it in my header like so:
<link rel="stylesheet" href="<?php echo bloginfo('template_directory'); ?>/font-awesome-4.2.0/css/font-awesome.min.css">
All the other icons work completely fine. I can by the way still click on the twitch link but the icon is invisible. I also already tried clearing my cache and another browser.
On the Font Awesome page, in the Brand Icon's section, it says:
Warning!
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you'll need to modify the social icon class names.
I has the same problem and it was an outdated version of Font Awesome who was loading after the updated version
Well, this question is old and probably some of the answers, but for those that are using the new version of Font Awesome like v5 and having the same issues, the current version as at when I am writing this is v5.0.13.
Make sure that you set the CSS to font-weight:900
e.g.
i.fab {font-weight:900}
Please note that the font-weight is not bold but 900.
This worked for me!
For more info visit Troubleshooting Page for Font Awesome