Adding Font Awesome to WordPress

This tutorial will go over how to add Font Awesome to our WordPress theme. Bootstrap comes with around 200 Glyphicons, but sometimes that just isn’t enough! Font Awesome also includes some great styles to use the icons in unordered list, stack them, rotate them, and use throughout our Bootstrap mark-up. Follow along to add Font Awesome to your WordPress theme.

Note: This video was also recorded after the Bootstrap menu and Bootstrap grid tutorials. Please don’t get discouraged that your theme doesn’t look like the one in the video. Just focus on the code in this tutorial and keep moving through the tutorials. Your theme will look the same in no time!

Font Awesome has been updated since this video! Yay! All this means is more icons. You will still follow all the same steps in this tutorial.

Steps

  1. Download Font Awesome from their website here
  2. Unzip the Font Awesome package and move the font-awesome.min.css file to your theme /css/ directory
  3. Move all the font files from the Font Awesome package to your theme /fonts/ directory
  4. Open the functions.php file and enqueue the Font Awesome CSS file around line 101. Your bootstrap_scripts function should now look like the following:

  5. Now Edit or Add a new post/page and test out your new icons!

Notes from the Video

You can download Font Awesome from here. This is also a great place to pick up some code examples to test throughout your WordPress theme.

Feedback

Please let me know what you think of this tutorial and if you need help with anything.

  • Camila

    I have been following the tutorial exacly as you do it and in order and my sidebar is not on the side but rather at the end of the page, what did i do wrong?

    • Go back over the Grid system tutorial (https://bootstrapwp.com/adding-bootstrap-grid-system-wordpress/ and )watch the video tutorial closely. A lot of people have been missing a closing div tag due to copy and pasting the code.. There is also a topic in the forum that goes over this and should help you get it sorted out: https://bootstrapwp.com/topic/sidebar-is-beneath-my-comments/

      Let me know if you cant figure it out.

      • mxl3000

        Brad, thanks for the tutorial, I too have my sidebar at the bottom of my page, the Grid system tutorial is 2 lessons after this, up until now, I haven’t encountered a div tag yet in any of the lessons, we’ve just been editing the functions.php up until now. Hope this helps someone in the future.

        • Oh I see. I probably recorded this after I setup my grid system. Don’t worry though your sidebar wont be at the bottom forever! =)

  • tracy

    In the previous video you added the ‘jquery’ after array for bootstrap-js, and it’s not shown here in this code example.

    • Thank you for pointing that out. I will update the sample markup code.

  • Schmid Beda

    A question
    I dont understand why “respond-js” still is included in this part of the tutorial

    Didn’t we remove it previously form the “enqueue” script?

    • There are two tutorials on adding respond.js to your theme. You can pick either way to add it to your theme. This tutorial is about adding Font Awesome to the theme, so I would focus on getting that script enqueued and not worry about the route you picked to add respond.js.

      • Schmid Beda

        🙂 OK

  • Shawn Lattanzio

    I cant get this one to work i have the minified css file in the css folder and i put font files in the fonts folder and i wrote the enque tag for the css file but i cant gt an image to show up

  • rabin rai

    Hi, Brad W.
    I already post this problem but i can’t solve yet. Why not showing my font-awesome.min.css?
    I check everything all are correct but still not working I followed by your tutorials videos #Adding Font Awesome to WordPress. Still not sure what happening? Please any solutions.

  • Thanks, it works 😀