How to Fix Font Awesome Icons Showing as Box?

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:

Using Font Awesome
Using Font Awesome

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.

Font Icon Sow Box
Font Icon Sow Box

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
Related:  Google AdSense Glossary Terms

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.

Get Font Awesome CDN Kit
Get Font Awesome CDN Kit

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.

Font Icons Showing as Box
Font Icons Showing as Box

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.

Related:  How to Fix 500 Internal Server Error?

.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.

Related:  CSS Overlay Effect on Image Hover for Weebly Site
StyleAvailabilityFont WeightStyle PrefixFont Family
SolidFree900fasFont Awesome 5 Free or Font Awesome 5 Pro
RegularPro400farFont Awesome 5 Pro
LightPro300falFont Awesome 5 Pro
DuotonePro900fadFont Awesome 5 Duotone
BrandsFree400fabFont Awesome 5 Brands

Recommended Articles:

Leave a Comment