How to Display Icons in a WordPress Post

At the end of January, I tweeted about a new WordPress experience I had. Tweet about Genericon'd plugin After developing WordPress blogs and websites for 12+ years and using graphical icon representations the majority of that time, I used a WordPress icon font plugin and a shortcode, instead of graphics, to spice up the content presentation on a blog post.

Genericons and Genericon’d have opened up a whole new arena of possibilities for me. Icon fonts are my “shiny new bobble” that can enhance content presentation and, when used judicially, can highlight content without distracting the audience.

It all started when a website being developed was not behaving as expected on iPads and iPhones whenever the menu icon displayed. I fiddled with the CSS for hours. (Oh, yeah, I HAD been using genericons, but via CSS!) I have been working with WordPress blogs since 2003, so was super frustrated that I could not quickly resolve the icon behavior on those devices.

In researching the origin and behavior of the menu icon, the “Genericons” font by Automattic (creators of WordPress) came into my consciousness. Per the Genericons website,

Genericons is a free, GPL, flexible icon font for blogs!

When I did a search for ” genericons wordpress “, the Genericon’d plugin displayed at the top of the search results.  Really? It is that easy? Just install the plugin?

I installed the Genericon’d, plugin via the WordPress dashboard and started using it right away.

Install Genericond plugin

click for larger

Naturally, I created a test post and used a dozen icons interweaved with content and content with graphics. I tested invoking them via HTML and by shortcode. Shortcodes feel the most comfortable way for me to use the Genericons icon font in WordPress. You can test on your own to see which appeals to you. (There is a sample below.)

How do you find the correct icon code to use?

It is as simple as 1-2-3. After Genericon’d is installed, there is a new menu item on the Appearance menu.

  1. Hover over Appearance and click on Genericon’d.
  2. When the Genericon’d page displays, scroll down to the icon you want to use and doubleclick it.
  3. Scroll back to the top of the screen and COPY the version that you will use to display the icon; CSS, HTML, or Shortcode.

How do you add the icon HTML or shortcode to a WordPress Post or Page?

Note: For best results, add the icon code using TEXT mode. Typically, a post or page first displays in VISUAL mode.Text mode in WordPress

Click the TEXT tab next to VISUAL to change modes. You will see the content of your post/page, and maybe with some tags [] that you don’t recognize.  Ignore those.

In TEXT mode:

  1. Go to the place where you want to add the icon.
  2. Paste the HTML or shortcode
  3. Click Update/Save draft
  4. View the Post or Page to ensure that the results are what you intended

The Genericon’d plugin is a breath of fresh air for this WordPress developer. I just need to learn to constrain myself!

Note to self: Just because you can use icons, doesn’t mean you should

Got it!

I the Genericon’d plugin!

HTML (instead of a shortcode) was used to display this icon. Notice that the font does not match the font in my blog, the content is centered, and the icon is larger. I prefer that the tool do the work for me, so, I’ll stick with shortcodes that automatically style the icons to match the styles in my blog.

Happy Blogging, my friends!


Comments are closed.