A Simple Guide to Adding Font Awesome Icons to Your WordPress Site

Last updated: April 9, 2018 by Chanel Stone

Font Awesome is a popular set of icons that can be added to your website. Adding ‘Font Awesome’ icons create a user friendly website that is visually appealing to your target audience. ‘Font Awesome’ icons are CSS fonts (not images) so it loads faster.

font-awesome-tips-and-tricks-hq

The icons are vectors meaning that they can be displayed at any size without becoming disfigured.They are completely customizable. You can change the color and add animation to the icons.Font Awesome icons work on all browsers.

I generally prefer to add Font Awesome icons to my WP site manually. You can load the Font Awesome CSS library by adding a little bit of code to your theme’s functions.php file (or a custom plugin file).

adding-font-awesome-to-wordpress-website

In your WordPress admin dashboard, click on the ‘Editor’ menu under ‘Appearance’.Click on the ‘Theme Functions’ link on the right-hand side of the screen (functions.php).Copy and paste the following code into the Theme’s functions.php file (you can add it to the bottom of that file) and then click ‘Update File’:add_action( ‘wp_enqueue_scripts’, ‘tthq_add_custom_fa_css’ );function tthq_add_custom_fa_css() {wp_enqueue_style( ‘custom-fa’, ‘https://use.fontawesome.com/releases/v5.0.6/css/all.css’ );}

You can now use the HTML code to show the icons on your site. Below is an example:

You can add Font Awesome icons to your website using a free plugin. This method is recommended for those who are not able to manually add the library using the code mentioned above.

Install and activate the Better Font Awesome plugin on your WP site.On any post or page, use the inserter of this plugin to embed a range of icons on your website.Click on the icon you wish to insert. It will now appear on your post or page.

lt="inserting-icons-font-awesome" src="http://myguidereviews.com/wp-content/uploads/2018/04/inserting-icons-font-awesome.png" width="300" height="264">

Filed Under: Web Design, WordPress Tagged With: child theme, CSS, CSS Usage, google font, how to, Web Design

Reader Interactions

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.