I downloaded the font-awesome package, and I included the css file in my page as instructed, but it doesn't work. It displays as "fl".
before you add any font awesome class add "fa" before it,
like [ class="fa fa-search" ] to get ride of this issue.
credit goes to Nabil kadimi's answer at this Font Awesome not working, icons showing as squares post
Related
I'm using assan template
to build my laravel project. Everything is fine but the font awesome wont show up. then I'm using this link to fix it:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css">
after that, font awesome showed successfully, but the icons not. Here is the code where i put my icon:
<i class='icon-pictures fa-3x mb20 text-primary'></i>
I'm pretty sure that i've already include all java script and css to my project. but I don't know why this happen. is there something i can do or maybe i missed something?
The method for displaying an icon is that you have to use "fas fa-" following with which icon you want.
In the <i> class add fas fa- and the icon name after the -, This will display the icon.
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
I'm having a problem with Font Awesome. In the following jsfiddle you can see that I am getting some really weird character instead of a bluetooth icon
https://jsfiddle.net/petarvasilev/q5bjz945/2/
this is the code that I am using
<div class="fa-bluetooth fa-4x"></div>
and this is the link I am using to import font awesome
https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
any help much appreciated : )
There is no need to include font itself. This is how you should use it:
<div class="fa fa-bluetooth fa-4x"></div>
You are missing "FA" class name for your icon.
Font Awesome has recently changed icons notation from for example icon-shield to fa-shield.
But where has icon previously known as icon-remove-sign gone in the same time? I can't find it anywhere within Font Awesome 4.0.3 icon list. Actually I don't see anything with remove in name or anything that would "accompany" (as opposite) icon (now called) fa-check.
In general, nearly every FA's "yes"-like icons have their counterparts ("no"-like icons). In general, you have variety of icon-sets for both "success" and "fail"-like situations. But this one is clearly missing.
It appears the icon is now called fa-times: http://fontawesome.io/icon/times/.
At least as I understood the changes, the names should be more consistent with the actual icon shape, and "times" is the correct name for ×.
The exact missing icon-remove-sign in Font Awesome 4.0 is fa-times-circle
<i class="fa fa-times-circle"></i>
and variation
<i class="fa fa-times-circle-o"></i>