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.
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.
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.
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.
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.
Johan says
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?
Kal says
I just install WP Visual Icon Fonts but, the icon button not showing!
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?
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
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??
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.
Admin
Karen Cioffi says
Great information. I didn’t know about these icon fonts. I’ll be testing them out!
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.