Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Use Icon Fonts in WordPress Post Editor (NO HTML Required)

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Use Icon Fonts in WordPress Post Editor (NO HTML Required)

Icon fonts are vector icons used as fonts. They are popular among web designers because they look prettier than bitmap images. They can be resized without losing quality and styled using CSS. This is why many WordPress themes use icon fonts. Most notably, the default Twenty Thirteen and Twenty Fourteen themes. However for beginners, it is a little complicated to use icon fonts on their WordPress sites. In this article, we will show you how to use icon fonts in WordPress post editor without writing any HTML or CSS.

Genericons a GPL Licensed open source icon font set

Video Tutorial

If you don’t like the video or need more instructions, then continue reading.

First thing you need to do is install and activate the WP Visual Icon Fonts plugin. Upon activation, you need to go to Settings » Icon Fonts to choose an icon font set. Currently, the plugin comes with Font Awesome and Genericon fonts.

Choose an Icon Font to use with your WordPress theme

After choosing a font, you can now use it with in your WordPress posts, pages, custom post types, and even in your theme’s template files. To use icon fonts you need to create or edit a post, and you will notice an Icons button next to the Add Media button. Clicking on the icons button will open a drop down menu of all the icons available in the icon font set. Selecting an icon from this drop down menu will insert the icon in the post editor.

Adding icon fonts in WordPress posts and pages

You can also change the font size and color using the buttons in the visual editor.

To use an icon in your theme, the easiest way to generate the required HTML is to add an icon font in post editor and then switch to Text editor to copy the HTML code. Paste it in your template files where you want to display an icon font.

Copy icon fonts HTML to use in your theme files

Icon fonts can be used to create beautiful landing pages in WordPress without using images. They can also be used to highlight different sections of a long form article or post. This plugin brings you 369 icons with Font Awesome and 62 icons with Genericon font.

We hope this article helped you add awesome icon fonts in WordPress. Let us know how you intend to use icon fonts in your WordPress projects by leaving a comment below.


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Sandra Wills says:

    I used Genericons with a WordPress theme and it works great in IE9, Google Chrome and Safari. But in Firefox, they don’t display correctly. It looks like a broken link. Can you tell me how to fix this?

  2. Justin Robinson says:

    Hi WPB,
    I have imported some icons into a plugin for use into wordpress posts.
    All I want to do is increase the size & change the colour of the icon.
    Can you please advise me on how I would change the below code to do this:

    I cannot adjust size in visual editor, it must all be done in text,
    as flicking between the 2 takes out the code for some reason.

    I am also using a different plugin: WP icons SVG – Author: Evan Herman
    Be interesting to see where I am going wrong,
    thanx in advance guys :)

  3. Derek Klau says:

    Hi, I just watched your video and installed as you mentioned, all i get when i click on the drop down in my post; whether new or old is a search icon i cannot click on??

  4. Anne says:

    Is there an issue with cross browser optimization when you use icon fonts ?

    • WPBeginner Support says:

      Anne, as always designers have reported having issues with IE9 and some earlier versions of Firefox. But nothing too complex to handle.

  5. Karen Cioffi says:

    Great information. I didn’t know about these icon fonts. I’ll be testing them out!

  6. Zimbrul says:

    You are my favorite read on my lunch break :-). Great article as always and Icon fonts are cool as a cucumber nowadays.
    I was wondering if you can add to the article how to add these icon fonts to the WordPress menu.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.