Quick Tip: How to Add FontAwesome (or Other Icon Fonts) to your WP Theme or Plugin

So, you want to use FontAwesome in your Theme, eh? Add the following snippet to your functions.php file:

wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' );

Do you want to use it in your Plugin? Just place that code in one of your functions within your plugin file and hook into the wp_enqueue_scripts Action:

add_action( 'wp_enqueue_scripts', 'plugin_slug_load_iconfont' );

function plugin_slug_load_iconfont() {
    wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' );
}

The same principle holds true for the other icon fonts that are available online.

But here, this one’s even easier: Dashicons. They’re already included as part of the WordPress admin dashboard, so in order for you to get them working for non-logged in users, all you have to do is:

add_action( 'wp_enqueue_scripts', 'plugin_slug_load_dashicons' );

function plugin_slug_load_dashicons() {
    wp_enqueue_style( 'dashicons' );
}

Simple, right?

Author: Aaron

Aaron Snowberger is an experienced web developer, graphic designer, and educator in ESL and computer technology. He holds a Bachelor's degree in Computer Science, Master's degree in Media Design, and professional certifications for React (JavaScript) development, and as a Google Certified Educator and Trainer. Aaron is passionate about helping new learners discover the joys of technology, and has presented across the country at multiple local, national, and international conferences in both the ESL and web development fields. His most recent talk was given at the 2019 JSConf (JavaScript Conference) in Seoul on September 3, 2019. (https://2019.jsconfkorea.com/en/tutorials)

Leave a Reply

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