Menu
If you installed the Free Font Awesome version but try adding Pro icons to your web pages, they won't show. The solution to this is either you use the alternative free icons or upgrade to a Pro subscription/license.
You place Font Awesome icons by using the prefix fa and the icon's name.
Changes in Elementor plugin To fix this problem, firstly you need to go to your admin dashboard. Go to the “Elementor” > “Settings” and open the “Advanced” tab. Here you need to find the “Load Font Awesome 4 Support” option and activate it.
Here is a simple quick way to use icons from Font Awesome as a “background-image” using CSS. You need to get the code of the symbol of Font Awesome. The easiest way is to use your browser inspector on the the icon you want to use and copy the code, in my example it's the little star icon using the code “\f005”.
Under your reference, you have this:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Specifically, the href= part.
However, under your full html is this:
<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Have you tried replacing src= with href= in your full html to become this?
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Works for me: http://codepen.io/TheNathanG/pen/xbyFg
For seekers of missing font-awesome icons, I have collected a few ideas:
Assure you use a correct link to the CDN, such as:
<link
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css"
rel="stylesheet" type='text/css'>
If your page uses HTTPS, do you link to the font-awesome CSS using HTTPS (replace http:// with https:// in the link above).
Double check that you don't have AdBlock Plus or uBlock enabled. They might be blocking some of the icons.
Reset your browsers cache. (On Chrome do a looong click on the reload button and select Hard Cache Reset)
Assure that the <span> or <i> element you use, uses the FontAwesome font family. For example, it must not just
<i class="fa-pencil" title="Edit"></i>
but
<i class="fa fa-pencil" title="Edit"></i>
It won't work if you have something as the following in your CSS:
* {
font-family: 'Josefin Sans', sans-serif !important;
}
If you are using IE8, are you using a HTML5 Shim?
If this doesn't work, there are further Troubleshooting Ideas on the Font Awesome Wiki.
At first I couldn't get this to work with Font Awesome 5:
<i class="fa fa-sort-down"></i>
That's why I came here, being unfamiliar with font awesome. So when I looked further I noticed that my issue was merely an issue with the version.
w3schools helped me out in this case.
New in Font Awesome 5 is the
fasprefix, Font Awesome 4 usesfa.The s in
fasstands for solid, and some icons also have a regular mode, specified by using the prefixfar.
I already noticed the different files in the FontAwesome css folder, like:
And that's when I realized my mistake. All I had to do was include the appropriate css to the html:
<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">
And then reference the correct item:
<i class="fas fa-sort-down"></i>
This setup works for me. Though not all items have equivalents in each type. This will not work:
<i class="far fa-sort-down"></i>
As a side note, when you don't want to reference all seperate files then this will suffice:
<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
Mine was not working because I wanted an icon which was not released in the FA version I was using.
This answers why some icons shows but others no.
Pretty obvious but I guess some people still fall for this. Like me.
Just adding some more info to the above answers in regards with update on fontawesome,
If you use font awesome 5,
a. just copy-to-paste the below HTML,
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
Note: Better to include all your scripts within the <body> {YOUR_SCRIPT_HERE}</body> and just before (YOUR_CLOSING_BODY)
b. And for example,
<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
I got the similar problem, Shows icons in square, tried as per the instructions specified here : https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Resolved by using this reference in head section of html page
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
You must use https for maxcdn.bootstrapcdn.com. Only https on maxcdn support CORS
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With