• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
logo

BeginWP

  • Home
  • Plugins
  • Themes
  • Tutorials
  • Problems & Fixes

How to Add Genericons Icon Font to WordPress Easily (Tutorial)

March 2, 2013 by Saqib

Genericons might seem to be a new term to many, and that’s why let’s first discuss what is a Genericon? Genericons are new icon fonts which are designed with simplicity in mind so that they can be used in wide variety of projects.

These Genericons are basically vector icons embedded in a webfont. You can change icon colors on the fly, or even apply CSS effects such as drop-shadows, change size, color, opacity, outline, gradients, etc.

There are two ways to add/integrate Genericons to WordPress and in this tutorial, we’ll be taking a look at both the methods.

1. Adding Genericons the Manual Way

Download the Genericons font from here. Now, copy the font folder and the genericons.css file into your project. If you’re trying this on a live site, then upload it to your theme folder and then link the CSS in your HTML by using this code.

<link href="path/to/genericons.css" rel="stylesheet">

You can now change icon color and apply many effects to your icons. For example;

Change color of every icon:

.genericon {
   color: #1c7fd7;
}

Change color of only Twitter icon:

.genericon-twitter {
 color: #1c7fd7;
}

You can add many other types of CSS effects. Here’s a preview of how it will look like in front-end.

genericons

While the above method works great, it involves some CSS knowledge, and may not be suitable for all. That’s why let’s head over to the second method.

2. Adding Genericons by Using a Plugin

The plugin method is perfect for those who want an easy method to integrate Genericons. Download, install and activate the Genericon’d plugin. After activating, you can instantly start inserting icons either by HTML or by using shortcode inside your posts, pages and text widgets.

To know which shortcode or HTML to use, go to Appearance > Genericon’d. You can find detailed instructions on the usage of Genericons on this page, with examples.

genericons-wordpress

To insert Twitter icon, add this shortcode anywhere:
[genericon icon=twitter]

Just replace the icon name with the icon that you want to insert. For example; to insert star icon, use this shortcode: [genericon icon=star]

Alternatively, you can also use this HTML:
<div alt="f202" class="genericon genericon-twitter"></div>

Just in case if you haven’t noticed, these Genericons are also integrated to the new default WordPress theme – Twenty Thirteen which is currently under development.

So that’s it. Try it out on your WordPress site.

Filed Under: WordPress Tutorials

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

STAY CONNECTED

  • Email
  • Facebook
  • Twitter

SUBSCRIBE

Get all WordPress tutorials, news, theme and plugin reviews right in your Inbox.

Recent Posts

  • Elegant Themes Review – Is it Worth the Money?
  • How to Add Captions and Subtitles to Videos in WordPress
  • How to Use the new Block Patterns feature in WordPress
  • How to Enable Auto-update for Any WordPress Plugin & Theme
advt advt

siteground Bloom plugin
WPRocket

Footer

Pages

  • About
  • Subscribe
  • Privacy Policy
  • Disclosure
  • Contact

About BEGINWP

Freshly baked stuff always tastes good, right? That’s why we at BeginWP focus on cooking the finest WordPress tutorials, along with plugins, themes, tips and tricks.

This site teaches how users can get the most out of this amazing CMS.

We ❤ WordPress.

© 2022 · BeginWP · All Rights Reserved · Rocking by WordPress, of course.