Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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

Subscribe to WPBeginner

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

9 CommentsLeave a Reply

  1. I installed the plug in and completed the settings, but the icon button does not show up in the text block editor.

    I am using the7 Theme and WPBakery Page Builder. I suspect the plug in is either not compatible with my theme / page builder or not compatible with the latest version of WordPress. Notes the plug in has not been tested with the latest version and last update was 5 years ago.

    Are there any other plug ins that can be considered?

  2. 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?

  3. 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 :)

  4. 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??

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

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.