How to use Font Awesome image iconic font

What is Font Awesome?

Font Awesome is a scalable image iconic Font and CSS Toolkit which is easily scalable vector graphic for a website. Font Awesome gives you scalable vector icons that customize the graphics icon’s size, color, drop shadow, and more customization that can be done with the power of CSS Toolkit.

What is scalable Vector Icons?

Scalable Vector Graphics (SVG) is a two-dimensional vector image format for better interactivity and animation.

Why should you use Font Awesome?

Every image speaks thousands of words and it improves the website appearance. More powerful features are a wide range of high-quality images, easy customization of color, size, and shadow, render very quickly and developer innovates and moves forward.

Benefits of The Font Awesome are:

    1. Customize the icons instantly.
    2. CSS gives the power of more customization.

More than 600 icons in different categories such as Social Media icons, Web application icons, Accessibility icons, Transportation icons, Gender Icons, File type icons, Spinner icons, Form Control icons, Payment icons, Chart icons, Currency icons and text editor icons.

  • No need JavaScript.
  • Desktop Friendly.


Font Awesome

#1 Add the Font Awesome CSS files

Add this code in function.php

add_action( 'wp_enqueue_scripts', 'problogginghub_load_font_awesome', 99 );
/*** Enqueue Font Awesome Stylesheet from MaxCDN**/
function problogginghub_load_font_awesome() {
if ( ! is_admin() ) {
wp_enqueue_style( 'font-awesome', '//', null, '4.0.1' );

wp_enqueue_style() function is used to enqueue CSS style-sheet in WordPress theme.


wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' )


$handel is a title of the CSS stylesheet.

$src is a link address of the CSS StyleSheet.

MaxCDN provides the Font Awesome Style-sheet CSS file. Advantages of MaxCDN are to boost the loading speed of the website page and reduce the bandwidth overhead.

#2 Insert the Font Awesome code in Template /Pages

Now, you can able to add beautiful icons on your website. If you want to use Font Awesome icons in WordPress, you need to insert the code in the template /pages as few simple tags or CSS code.

Font Awesome Address-book icon

you can just place the icon in anywhere with the <i> tag.

 <i class="fa fa-address-book" aria-hidden="true"></i>

Font Awesome is a wide range of collection of high-quality icon set and you can add this icon with simple coding. I have a great experience with it that not only improve the appearance of the site, but it also adds extra values to your site and it force to your user s that they think, it is an extraordinary website.

If this article helps you to know about the Font Awesome, you share this article in social network website that gives the opportunity to your friends for reading this article.

Leave a Reply

Your email address will not be published. Required fields are marked *