• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Tips and Tricks HQ

  • Home
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • Accept Stripe Payments
    • WP Download Monitor
    • Easy HTTPS Redirection
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
  • Products
    • All Products
    • Checkout
  • Support
    • Support Portal
    • Customer Only Forum
    • WP eStore Documentation
    • WP Affiliate Software Documentation
    • WP eMember Documentation
  • Contact

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

Home » Blog » 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

Why Do Website Owners Use Font Awesome Icons?

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

Adding Font Awesome Icons to Your Website Manually

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



  1. In your WordPress admin dashboard, click on the ‘Editor’ menu under ‘Appearance’.
  2. Click on the ‘Theme Functions’ link on the right-hand side of the screen (functions.php).
  3. 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:

<i class="fab fa-github-square"></i>

Adding Font Awesome to Your WP Site Using a Plugin

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.

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

inserting-icons-font-awesome

Related Posts

  • How to Use Firebug to Modify Your WordPress Site’s CSS (Video Tutorial)
  • How to Change Font Size on WordPress
  • Basic Guide to CSS
  • How to Remove Powered by WordPress from Your Web Site Footer

Web Design,  Wordpress child theme,  CSS,  CSS Usage,  google font,  how to,  Web Design

Reader Interactions

Comments

  1. B says:
    September 11, 2019 at 12:20 am

    Hi,
    Even after performing all the actions given in this post, I do not get Add Media or Insert Icon buttons on existing or new pages. How can I get them? I am currently using the Stout theme in WordPress and while installing the Font Awesome and Better Font Awesome plugins, it showed up that they are supported by this theme.
    Kindly help!

Leave a Reply

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

Primary Sidebar

Featured & Popular Articles

Video Answers to Top WordPress QuestionsWordPress Optimization Tips and Tricks for Better Performance and SpeedEssential WordPress Security Tips - Is Your Blog Protected?WordPress Simple PayPal Shopping Cart PluginTop 15 Search Engine Optimization (SEO) Techniques I Forget to DoList of the Best and Must Use WordPress PluginsHow do I Start a Blog and Make Money Online?Good Domain Name Picking Tips for Your Blog SetupFind Out Which WordPress Web Hosting Company Offers the Cheapest and Reliable Web Hosting Solution

Featured WordPress Plugins

WP Express Checkout Plugin
wordpress estore plugin
wordpress membership plugin
wordpress affiliate plugin

Recent Posts

  • How to Use Browser Developer Tools to Inspect Elements and [...]
  • Accept Donations via PayPal from Your WordPress Site Easil [...]
  • Buy Now Button Graphics for eCommerce Websites [...]
  • Subscription Button Graphics for eCommerce Websites [...]
  • Adding PayPal Payment Buttons to Your WordPress Sidebar Ea [...]

Comment & Socialize

  • @Rob, We have just released ...
    - admin
  • I installed the plugin a co ...
    - Rob
  • @Sebastian, We've released ...
    - admin
  • I've used this plugin on a ...
    - Sebastian Djupsjöbacka
  • @John, this plugin doesn't ...
    - admin

Check out our solutions

View our WordPress plugin collection and start using them on your site.

Our WordPress Solutions

Footer

Company

  • About
  • Privacy Policy
  • Terms and Conditions
  • Affiliate Login

Top WordPress Plugins

  • Simple Shopping Cart
  • PayPal Donations
  • WP Express Checkout
  • WP eStore
  • WP eMember

Blogging Tips

  • How to Start a Blog
  • Selecting a Good Domain
  • Cheap WP Hosting
  • WP Video Tutorials
  • Simple SEO Tips

Search


Keep In Touch

Copyright © 2025 | Tips and Tricks HQ