Sridhar Katakam

Genesis and WordPress Tutorials

Using Font Awesome in WordPress

by 28 Comments

Version 4.1.0 of Font Awesome has been released recently and it’s time for a refresher on how we can use icon fonts in WordPress.

To load Font Awesome, add the following in child theme’s functions.php:

// Load Font Awesome
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}
view raw functions.php hosted with ❤ by GitHub

Below are a few examples of using Font Awesome icons in various places.

Within content

Screen Shot 2014-05-18 at 8.42.50 PM

In Page/Post editor when in Text mode,

<i class="fa fa-phone"></i> +91 1234567890
view raw gistfile1.html hosted with ❤ by GitHub
.fa-phone {
font-size: 25px;
vertical-align: middle;
padding-right: 5px;
}
view raw gistfile2.css hosted with ❤ by GitHub

List of icons can be seen at http://fontawesome.io/icons/.

Nav menu items

Screen Shot 2014-05-18 at 9.47.22 PM

.menu-primary li a:before {
font-family: FontAwesome;
padding-right: 7px;
/*font-style: normal;
font-weight: normal;
text-decoration: inherit;*/
}
/* Home menu item */
#menu-item-1616 a:before {
content: "\f015";
}
/* Pages menu item */
#menu-item-1413 a:before {
content: "\f0e8";
}
/* Categories menu item */
#menu-item-1414 a:before {
content: "\f15b";
}
view raw gistfile3.css hosted with ❤ by GitHub

2014-05-18_21-50-44

Unicode values can be obtained by on the icon detail page.

2014-05-19_12-28-46

Widget title

Screen Shot 2014-05-19 at 12.37.11 PM

#meta-3 .widget-title:before {
font-family: FontAwesome;
padding-right: 7px;
content: "\f05a";
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
view raw gistfile4.css hosted with ❤ by GitHub

Also see Font Awesome icons with a circular background.

  • I want to install the font awesome icons on my primary menu in the Eleven40 theme, into which file do I put this and the rest of the info?
    .menu-primary li a:before {
    font-family: FontAwesome;
    padding-right: 7px;
    /*font-style: normal;
    font-weight: normal;
    text-decoration: inherit;*/
    You lost me on this one. Does it go in the menu.php file or the function.php?
    Thanks

    Reply

  • Hey Sridhar,

    All your posts always have the fonts being enqueued which just adds to page load.

    How would one load fonts using font-face?

    Reply

  • for some reason I can’t get this to work on a website i’m using locally with dynamik gen.
    Icons just come up as X’s with boxes around them.
    Not sure. I’ll double check link for cdn.

    Reply

  • Heya!

    Was wondering what your thoughts are on advantages/disadvantages to pasting CDN link in header vs. loading in function?

    And what about loading stylesheet so that it doesn’t reflect specific version, but will load most recent ?

    thnx!
    -jennyb

    Reply

  • Hi Sridhar,

    You are the man! thanks for this wonderful tutorial. You have made every thing look easy with the examples. Now i’m able to use font awesome without any glitch. 🙂 🙂

    Reply

  • Hi Sridar,

    Can you (or anyone else) tell me how I can prevent the icon from showing up in nav drop-downs but continue to display in the main menu item on nav bar?

    Thanks!

    Reply

  • Hi, I am using customizr theme in my wordpress website. I would like to see the FA icons instead of the “featured image”
    Can you please help me

    Reply

  • Hello, how would I add a font awesome down arrow such as &#f107 right aligned in an input text box, and to the right of the text “Search this website” ? Here’s the code:

    //* Customize search form input box text
    add_filter( ‘genesis_search_text’, ‘sp_search_text’ );
    function sp_search_text( $text ) {
    return esc_attr( ‘Search this website ‘ );
    }

    Reply

      • I have you and StudioPress to thank for finding the solution. 🙂

        Put this in functions.php
        //* Customize search form input box text
        add_filter( ‘genesis_search_text’, ‘sp_search_text’ );
        function sp_search_text( $text ) {
        return esc_attr( Search this website …’ );
        }

        //* Customize search form input button text in order to add Font Awesome drop down arrow
        add_filter( ‘genesis_search_button_text’, ‘sk_search_button_text’ );
        function sk_search_button_text( $text ) {
        return esc_attr( ‘’ );
        }

        Put this in style.css

        .site-header .search-form {
        position:relative;
        }
        .header-middle *::-moz-placeholder {
        font-family: “myriad-pro-condensed”,sans-serif;
        font-size:20px;
        }
        .header-middle input:focus {
        font-family: “myriad-pro-condensed”,sans-serif;
        font-size:20px;
        }
        .header-middle input[type=”submit”] {
        border: 0;
        color:#efe9dd;
        display:inline-block;
        font-family: ‘FontAwesome’;
        font-size:20px;
        padding:0;
        background-color:transparent;
        position: absolute;
        left: 170px;
        top:10px;
        }

        .header-middle input[type=”submit”]:focus {
        border: 0;
        color:#efe9dd;
        padding:0;
        background:none;
        box-shadow:none;
        font-size:20px;
        }

        Reply
    • >