How To Install & Display Genericons

The 2013 default theme for WordPress, Twenty Thirteen uses Genericons.

You can also use them in your own theme by downloading the package and installing them on your server.

Lets take a look at how to install Genericons manually which is pretty much the same as installing custom fonts.

You’ll also find a link to a handy plugin which does the job for you without the need to mess with code.

Download Genericons Package

Use this link to download the zip file containing the files.

Unzip/extract the files and upload the fonts folder to your child themes directory.

1. You can upload the genericons.css file to your child themes folder so you can then use all the icons in your theme or

2. You can take some of the CSS code for the Genericons you want to display and add the code to your child themes style.css file.

Either way, you’ll also need to link to either file which you can do by using a custom function or a hooks plugin.

Child Themes Style.css File

Add this code to the end of your child themes style.css file.

@font-face {
    font-family: 'Genericons';
    src: url('font/genericons-regular-webfont.eot');
    src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/genericons-regular-webfont.woff') format('woff'),
         url('font/genericons-regular-webfont.ttf') format('truetype'),
         url('font/genericons-regular-webfont.svg#genericonsregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Display Genericons

You can then display any of the Genericons anywhere in your theme using CSS or HTML tags

Using CSS

#title:before {
	content: '\f101';
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 16px/1 'Genericons';
	vertical-align: top;
}

Genericons look the best when you set the size to a multiple of 16px otherwise they will look fuzzy.

Using HTML

Paste the HTML anywhere you want to display your Genericon

<div alt="f100" class="genericon genericon-standard"></div>

Another way to install Genericons is to copy the font folder and the genericons.css file into your child themes folder.

This way you can display any Genericon in your theme using CSS in your style.css file or HTML tags.

You’ll also need to link to the file location which contains your Genericon CSS code whether that be your child themes style.css file or the genericon.css file.

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

Where To Load Your Genericon Font Files

I used the Genesis Simple Hook plugin in the genesis_meta hook location for loading the genericons.css file.

This hook executes in the document . It is commonly used to output META information about the document.

Displaying Buttons With Genericons

The CSS code Genericons provides for buttons may not display correctly in all themes so you may need to modify it.

The button code works with the default WordPress themes like Twenty Twelve but may not work on other themes unless you modify it.

Genericon Plugin

Mika Epstein who works on the WordPress.org forums has written a plugin named Genericon’d which enables you to easily display Genericons using shortcodes or HTML anywhere in your theme.

You may need to add support for shortcodes in widgets if you plan on displaying theme in widget areas.

add_filter('widget_text', 'do_shortcode');