I have the following code on my html page with angular 7.x and fontAwesome version 5.7.1
<i class = "fa fa-pencil"> </ i>
All the other icons and buttons are displayed well showing trash can and others but the pencil does not show it? what can happen?
Just change it to:
<i class="fas fa-pencil-alt"></i>
This icon name replaced version 4 "fa-pencil".
here you can find more help: https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4
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 bought a template from casethemes (https://demo.casethemes.net/consultio-finance2/) now while using same tags as their demo site i cant get the classes executed and shown as broken. Am i missing some libraries to integrate? Below are few classes arent working and showing broken images on my side but works fine on demo page.
<i class="zmdi zmdi-close"></i>
<i class="fac fac-search"></i>
<i aria-hidden="true" class="flaticon flaticon-social-media"></i>
<i aria-hidden="true" class="flaticon flaticon-report"></i>
On my website it is shown like this
On demo template it is shown as like this, you can check website
What could be the issue? Please help
check if font-awesome is getting imported properly
When I am using this
<i class="fa fa-user-circle" aria-hidden="true"></i>
icon is appearing but when I am using this
<i class="far fa-user-circle" aria-hidden="true"></i>
its not working.
How can I solve this?
Note: those two icons are different.
Double check you're using the latest version of Font Awesome. If you're still using version 4, you'll need to upgrade to version 5 to use many icons.
E.g the 'far' regular prefix was introduced in version 5.
Details here: https://fontawesome.com/how-to-use/on-the-web/other-topics/troubleshooting
I am wondering since the class "fa fa-plus"
displays the + sign in the navigation bar dropdown menu, how I would display the down arrow? Here is my current HTML:
<span class="fa fa-dropdown"></span>
I am using font awesome.
Try this:
<i class="fas fa-caret-down"></i>
I got the HTML from the site, where you can search for all the icons. Here is the link:
https://fontawesome.com/icons/caret-down?style=solid
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