My Home on the Web. Where the Code Snippets Run Free.

Accessing Jetpack’s Hidden Genericons

Accessing Jetpack's Hidden Genericons

The WordPress Jetpack plugin (by Automattic) provides over 30 useful modules in one compact plugin. Included with the plugin, via the “Sharing” module, is the Genericons icon webfont. While smaller than the popular Font Awesome icon webfont, the Genericons covers the basic needs of many websites. Scalable vector icons give many advantages over traditional icon images:

  1. Vectors, unlike rasterized images, do not degrade when enlarged
  2. Better site performance as image sprites are not required
  3. Control color and size via CSS – just like text
  4. Site-wide icon swaps are easily done through global CSS changes

However, Jetpack only provides ready access to the icons used within the “Sharing” module:

The default JetPack Social Sharing Icons Without Text

JetPack “Sharing” Module Icons Without Text
The default JetPack Social Sharing Icons With Text

JetPack “Sharing” Module Icons With Text

Please note: The Jetpack “Sharing” module must be active for the following to work.

How to Access the 118 other Genericons

Fortunately, JetPack has done most of the work for us. We just need to understand the CSS and add our CSS to call the other icons we want. In my example, I’ll create a simple iconified menu using several of the other Genericons.

Create the initial unordered list

Jetpack, via the pre-existing CSS included in the “Sharing” module, already provides the ability to format our list horizontally and to reference the icon font set. We will leverage that in our initial CSS. Our initial HTML will look like this:

And the result is:

Add The Icon CSS

Now, visit the Genericons site and source the correct icons for our menu. Note the value below each icon, as that value is the code we will need for our CSS. In the menu, I will use “f409” (a house), “f447” (a shopping cart) and “f304” (a person):
Sample of the Genericons from Automattic

Insert Icon sets into page content using the CSS content element with a :before pseudo tag referring to the type of element you want to place the icon. I’ll be using an empty span tag for my placement, as this inline tag can be used just about anywhere. For my example, the CSS will look like this:

Lets break down the CSS:

font: 35px/1 'Genericons';
The font reference is a shorthand version that indicates a font-size of 35px, a line-height of 1em and the font-family as ‘Genericons’.
content: "\f304";
This will indicate which icon webfont will be displayed from the ‘Genericons’ font-family using the code values we sourced before. Changing the value to another ‘Genericons’ value will change all icons on the site that reference this class. context is a CSS reference that inserts characters before the element. Note the backward slash in front of the code. That’s important – without the slash, just f304 will be inserted.
vertical-align: middle;
This will place the icon with the middle of the lowercase letters in the parent element. In my example, the parent element will be the <a></a> element.

Update the HTML

The last step will be to update the HTML to reference our new webfont icon classes:

The Result

With the HTML and CSS in place, the result will be:

Of course, you could also added color and background-color references to give an unique look for each webfont icon.

1 Comment