On This Page: [hide]
Font Awesome for WordPress is a popular icon set which is commonly used by website owners to add additional design elements. It is frequently used as it is extremely easy to use and includes several sets of convenient icons. However in some cases there may be problems when using it — cases where the icons are not visible. Our article will help WordPress owners to fix Font Awesome issues.
What Are The Font Awesome Icons for WordPress
Font Awesome is a popular collection of vector icons, social media images and other design assets which can be easily included in popular content management systems and website developer toolkits. It includes the several sets that include elements across all commonly used categories.
At the moment the current version of Font Awesome is 5.12.1 which is comprised of 1,557 icons in the free version. There is a paid versions that adds 7,722 additional icons. As part of the paid version called Font Awesome Pro the website owners can also include a duotone theme — the icons will inherit the projects base color or be colored by entering custom values.
Each individual icon and symbol is designed according to strict guidelines and standards. Font Awesome icons can be inserted either directly or customized by specifying size place, style and rotation, along with animations. Inserted icons are also compatible with accessibility modes of web browsers so that they will rendered correctly.
Font Awesome Not Showing Basic Checks
There are several basic reasons why an inserted Font Awesome icon is not showing. Always ensure that the latest version of the set is used — instructions can be found on FA’s official site for both the SVG and CSS versions. Font Awesome icons and symbols can be either linked, served from a custom server or delivered via a content delivery network (CDN). The site owners need to set the latest code depending on the type of implementation.
When inserted in HTML pages the icon sets may not appear if the code is not compliant with the official standard — site owners can verify if this is the case by using the official W3C Markup Validator. A WordPress specific issue is when various design related extensions are installed. Older versions may call in incompatible Font Awesome versions or block the proper loading of the icon sets. This is also extended to various JavaScript or custom CSS libraries that override the individual properties of the inserted icon tags.
There are several client-side issues that can be suspected when Font Awesome icons are not loading — adblocking extensions, plugins, anti-virus programs and etc. Sometimes their configuration will include font awesome and other design assets in a blacklist which will prevent their proper display.
Bear in mind that there is an official Font Awesome plugin available which makes it very easy to integrate the assets into a given site.
Font Awesome Code Fixes
There are several simple code fixes that can be implemented if none of the above methods work. Site owners need to make sure that there are 2 classes available in their HTML code — the first one is the fa class and the second one is the one that identifies the type of desired icon. An example is the following:
<i class="fa fa-search"></i>
When posting links to the CSS code the administrators will need to ensure that the correct link structure is used, an example code is the following:
link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css
A global font awesome fix which can be attempted is the inclusion of the Font Awesome code in WordPress’s footer section:
<?php wp_footer(); ?>
<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet">
</body>