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.
Related
I am trying to use tag icon in the html but it's not showing the icon.
This is how I am trying to display the icon but it's not displaying the icon
<i class="fas fa-plus"></i>
But whereas if I use icon like below it's displaying the icon
<fa-icon [icon]="['fas','plus']"></fa-icon>
But I need to display Icon as in the below type in order to do my logics.
<i class="fas fa-plus"></i>
Any Help, Thanks!
You need to make sure that the font awesome library is properly loaded on the page. If you are using the Angular CLI, you can add the following line to the section of your HTML file:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
Once the library is loaded and available, you can use the tag to display the icon.
You must be missing an link tag in the header of the index.html. Also try to use:
<i class="fa fa-plus"></i>
When I'v tried to use the i tag for icons, i noticed the "fas" was not working for me. I had to remove the "s"
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 might be asking a dumb question, but I am a newbie in javascript and its libs.
I came across the same problem as this post, and in the accepted answer, there was this line
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
However, after adding this line I have a navbar icon even though I did not include a img in my html. I also cannot manipulate the position of this icon built with this stylesheet. Can anyone explain what it does in this context? (referring to the post) I noticed that without this line of code the CSS and Javascript cannot be applied to a simple
<img class="search" src="icon.png" width="30" height="30">
And how is it possible for me adjust the location of the icon with this line of code?
font awesome is a css sheet, that when you use "font awesome classes" on a particular element, makes an icon appear. there's no jpgs or anything to mess with.
<i class="fa fa-address-book" aria-hidden="true"></i>
in a plain html, this will do nothing. but if you add the stylesheet to the page, you will see an address book icon.
all icons are located here: http://fontawesome.io/icons/
I'm working on an ASp/net application and i use font-awesome for some icons.
My problem is that icons doesn't appears. I have the last verison of font awesome
here is my code in my nested master:
<li class="active"><asp:HyperLink ID="lnkAccueil" runat="server" NavigateUrl ="~/Views/Accueil.aspx" Title="Accueil"><i class="fa fa-home"></i> </asp:HyperLink></li>
I call my file in my master:
<link href="~/Content/Styles/font-awesome.min.css" rel="stylesheet"/>
and the path is correct.
And here you have the result:
this is the console
I do the same in another project and everything works. I really don't unterstand.
If someone has an answer..
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.