In FontAwesome there is a "bookmark" icon.
As you can see, they are both named "bookmark". But how do I choose between one and the other?
Thanks!
Both have different classes 1st icon is something like <i class="fas fa-bookmark"></i> but for 2nd icon class is something like <i class="far fa-bookmark"></i>.
you need to pick from fas for solid, far for regular, fal for light, or fab for a brand.
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'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>
I would like to use Font Awesome´s Facebook icon, but I have difficulty in adjusting colors properly. My webpage background color is grey, and I would like to have an icon with mixture of white & blue, but extent of colors doesn´t adjust properly. Following is my HTML code:
<a class="list-group-item" href="https://www.facebook.com/pages/Scientific-Editing-and-Proofreading/726988900763622" target="_blank"><i class="fa fa fa-facebook-square fa-5x fa-cog-fa"></i></a>
And following is my css:
.fa-cog-fa {
color: white;
background-color:blue;
}
And you can see the final look under following link:
this is how my code at the end appear
As you see, blue color is so extent such that crosses borders of white color. How can I fix this issue?
You can stack multiple FontAwesome icons together, and with CSS, add in some extra formatting. fa-square and fa-facebook can combine well together, though you'll have to fiddle around with alignment and positioning to get it just right.
Basic markup for a stack:
<span class="fa-stack fa-5x">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
Documentation: http://fortawesome.github.io/Font-Awesome/examples/
Demo with colors, sloppily aligned: http://codepen.io/blindingstars/pen/WvVevE
That's because it's how the font is set. You can use the other facebook font <i class="fa fa-facebook'></i> that FontAwesome has and then manipulate it with CSS to look something similar. Here's a fiddle example. http://jsfiddle.net/q1pL3bop/1/
Font Awesome Pro 5 now has DUOTONES, and this would always be the preferable way to use two colors in a icon.
Official Resource Link: https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons
<div class="fa-3x">
<i class="fad fa-bus-alt" style="--fa-primary-color: gold;"></i> <!-- primary layer color defined -->
<i class="fad fa-bus-alt" style="--fa-primary-color: orangered;"></i> <!-- primary layer color defined -->
<i class="fad fa-fill-drip" style="--fa-secondary-color: limegreen;"></i> <!-- secondary layer color defined -->
<i class="fad fa-fill-drip" style="--fa-secondary-color: rebeccapurple;"></i> <!-- secondary layer color defined -->
<i class="fad fa-battery-full" style="--fa-primary-color: limegreen; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
<i class="fad fa-battery-quarter" style="--fa-primary-color: orange; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
</div>
You can't, easily. Fontawesome (or any font for that matter) has only two "colors": the foreground color and transparent. Using fonts with multiple colors requires some kind of overlay technique (I.e. Putting two icons on top of each other), which may be tricky to get right.
If you want color, stick with SVG, or even PNG.
I would recommend using Font Awesome's SVG to get the effect that you're looking for. With using a "font" the pseudo element ::before extends past the element itself. When using an SVG it fits the element perfectly.
You can find out more information on this at: https://css-tricks.com/icon-fonts-vs-svg/
I am using Awesome Font in my web project. Is there any option how to make shortcut to bunch of icons? E.g. I have circle-thin icon. Now on page I want to put three icons together so the result is OOO, but I do not want to put 3x times <i class="fa fa-circle-thin"></i> s in the code. So can I somehow create CSS shortcut when I write it, 3 circles will appear?
Example:
.circle-three {
<i class="fa fa-circle-thin"></i>
<i class="fa fa-circle-thin"></i>
<i class="fa fa-circle-thin"></i>
}
Then on page I would use only .circle_three class instead of typing the code for circle three times.
It is possible by both
adding a new class and creating a rule that inherits everything and only adds the changes you want to, and
by creating a brand new class that will substitute the original one completely.
Since the only attribute in the FontAwesome CSS for fa-circle-thin is the content of the before pseudo-element, and hence there is nothing else to inherit, in this case both solutions (appended class or new class ) have the same behavior / meaning.
.fa-circle-thin.triple::before {
content: "\f1db\f1db\f1db";
}
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Standard : <i class="fa fa-circle-thin"></i>
Triple : <i class="fa fa-circle-thin triple"></i>
If you check the CSS file included with Font Awesome, you'll find this rule:
.fa-circle-thin:before {
content: "\f1db";
}
So, you can make a similar rule to achieve what you want:
.fa-circle-three:before {
content: "\f1db \f1db \f1db";
}
Check this pen for an working example.
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