What is Font Awesome?
Font Awesome is a scalable image iconic Font and CSS Toolkit which is easy scalable vector graphic for website. Font Awesome gives you scalable vector icons that customize the graphic icon’s size, colour, 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 wide range of high quality images, easy customization of colour, size and shadow, render very quickly and developer innovates and moves forward.
Benefits of The Font Awesome are:
- Customize the icons instantly.
- 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.
#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', '//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css', null, '4.0.1' );
}
}
wp_enqueue_style() function is used to enqueue CSS style-sheet in WordPress theme.
Syntax:
wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' )
Parameters:
$handel is a title of the CSS stylesheet.
$src is a link address of the CSS StyleSheet.
MaxCDN provide the Font Awesome Style-sheet CSS file. Advantages of MaxCDN are to boost the loading speed of 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 sites appearance, it adds extra values to your site and it force to your user s that they think, it is an extra ordinary website.
If this article helps you to know about the Font Awesome, you share this article in social network website that gives opportunity to your friends for reading this article.
