Use Icon Fonts in WordPress Post Editor


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. It is a little complicated to use icon fonts on their WordPress sites for beginners. In this article, we will show you how to use icon fonts in WordPress post editor without writing any HTML or CSS.

Includes Icon fonts Font Awesome 4 (369 Icons)

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Includes Genericons Set (62 Icons)

Genericons are vector icons embedded in a webfont designed to be clean and simple keeping with a generic aesthetic. Use genericons for instant HiDPI, to change icon colors on the fly, or even with CSS effects such as drop-shadows or gradients!

Plugin Features

  • Simple option to select the icon font family you prefer
  • Easily select an icon in the visual editor window
  • Search and instantly Filter through the icons to get the one you want quickly
  • See the icons in the visual editor
  • Adjust the colour and size of the icons (and any other text elements in the editor)
  • Includes Font Awesome 4
  • Includes Genericons

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.

Masum Billah has written 326 articles

Hi I am Md. Masum Billah Contributor of this website. I always like to share various things with other. In this website I am sharing web design related tips and tricks, necessary web development tools, source codes for beginner and advance web developer. You may join with us to help other who want to learn web design and development. Thank you for stay with.

Recommended Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>