In web development, it is common to use font icons in SVG format instead of typing symbols using escape entities. For example, Font Awesome icons are most popular due to the scalability of the icons without loosing quality. However, if you do not implement properly font awesome icons will show as box. If you have problems with font icons, check out how to fix.
Using Font Awesome Icons in Website
There are two ways to use font icons on your website. One is to use in HTML tag and other is to use CSS pseudo classes. In both methods you should link the source font awesome CSS and host the font files on your server so that proper styles can be applied to the icons. Below is an example of using font awesome in HTML:
Check this article from official site on how to use font icons on your website. When something is missing on loading, you will see the box like below instead of the icon.
Why Font Awesome Icons Showing as Box?
In order to insert a font icon on your site, you have to have the followings:
- Host fonts on your server
- Link correct font awesome CSS version
- No conflict with old and new versions on the same site
- Check correct font family
- Use proper CSS class
- Check font weight
- Check CSS content code
Let us check out ease point in detail.
1. Host Fonts on Your Server
In order to use font awesome on your website, it is necessary to host the font files also in the same directory. All web font typefaces should be available in “/webfonts” folder and referenced in the CSS located in “/css” folder.
In most cases, the theme or plugin you use will install all necessary CSS and font files on your server. This is the case, especially when you use WordPress for your website.
2. Link Correct CSS Version
Font awesome was available for free till version 4.70. However, there are both free and pro versions available starting from version 5.0. Though version 4.70 was outdated, most free plugins and themes still uses 4.70 due to the uniform CSS class and ease of use. However, version 5.0 has brands and solid styles for free users and you can use all.css to include both styles.
You can either register with font awesome site to get a CDN kit or use the CDN files available from Cloudflare.
3. Conflicting CSS Versions
One of the problem we have faced with a WordPress site is that a plugin was using version 4.70 and the theme was using 5.0. This was causing the conflict due to incompatible CSS class and content codes. Therefore, make sure to use the latest version 5.0 with proper CSS source file on your site.
4. Use Correct Font Family
In order to use font awesome with CSS, you should use proper font family. Below is the kind of CSS code used in version 4.70.
.li:before {
content:”\00A3″;
font-family: “FontAwesome”;
font-weight: normal;
}
However, this will show a box instead of an icon with version 5.0. you should use the following CSS with versions 5.0 free version.
.li:before {
content:”\00A3″; font-family: “Font Awesome 5 Free“; font-weight: 900; }
Therefore, make sure to use correct “Font Awesome 5 Free” font family in the CSS. In addition, if you are using social icons then the font family should be “Font Awesome 5 Brands”. These are the two font families available for free users.
5. Use Proper CSS Style Prefix
Another confusion is that version 5.0 has different CSS classes than the previous versions. On version 4.7 you can use the fa style prefix like below:
<i class=”fa fa-camera”></i>
However, this will not work with version 5.0 onwards. The fa style prefix was deprecated and you should use fas for solid icons and fab for social branding icons like Facebook.
6. Check Font Weight
Font awesome version 5.0 does not support general “font-weight:normal” declaration in CSS. You should declare specific font weight for the icon to show up.
7. Check CSS Content Code
The last point is to make sure the content code used in CSS is correct. You have to use one of the available code in from the font awesome site in CSS pseudo element. In addition, ensure to use the code in the format “\f00d”; to show the icon correctly.
Summary
Below is the summary of font family, font weight, style prefix and styles available for free and pro users. You have to ensure all these are correct for the icon to show up instead of a box.
| Style | Availability | Font Weight | Style Prefix | Font Family |
| Solid | Free | 900 | fas | Font Awesome 5 Free or Font Awesome 5 Pro |
| Regular | Pro | 400 | far | Font Awesome 5 Pro |
| Light | Pro | 300 | fal | Font Awesome 5 Pro |
| Duotone | Pro | 900 | fad | Font Awesome 5 Duotone |
| Brands | Free | 400 | fab | Font Awesome 5 Brands |
4 Comments
Leave your reply.