WordPress.org

Ready to get started?Download WordPress

Plugin Directory

Genericon'd

Enables easy use of the Genericons icon font set from within WordPress. Icons can be inserted using either HTML or a shortcode.

Aren't they called Genericons with an S?

Yes, but Genericon'd is a Zaboo-esque sort of way of saying 'These icons have been genericonified!' I was in a The Guild frame of mind. Also since this is not the official plugin, I didn't want to use that slug.

Are there any known conflicts?

  • Jetpack 2.3.1 and older had a CSS conflict. This has been resolved in Jetpack 2.3.2, so please upgrade.
  • Slim Jetpack has the same issue as Jetpack, however they have not yet (to my knowledge) corrected the CSS conflict

What are all the codes to use?

If you're like me, you forget this alllll the time. On your WP dashboard, go to Apperance -> Genericon'd. The page there will show you everything you need to know about using Genericons, complete with clicky-copy-pasta links.

Can I add it to menus?

Yes! If you use CSS classes, you can apply a class like this: genericon genericon-facebook You may need to jigger about with css to make the layout perfect.

If you want to put an icon AND text, you have two options. One is to use pure CSS ala Justin Tadlock's implimentation, and the other is to just add in the menu text like this: <i class="genericond genericon genericon-facebook"></i>

When I exported and imported my content, the menu code didn't come with. What up?

Yeah, Apparently it doesn't export/import right. I don't know why. I'm working on it, and a way to put shortcodes in menus, but patches are welcome.

How do I change colors?

The power of CSS! If you want to change the color to red for all genericons, add .genericon {color:red;} to your theme's CSS. If you just want Twitter to be blue, add .genericon-twitter {color:blue;} and so on and so forth. Colors are based on font, you see.

Okay, but I want to change color in just this one use...

I know what you mean. Try this: [genericon icon=twitter color=blue]

It uses inline styling, which I hate, but this was the best way to solve the problem that I could find (suggestions welcome).

Speaking of, can I make just this one icon bigger?

Sure can! Use this: [genericon icon=twitter size=2x]

You can use 2x through 6x. Anything else punts it to 1x.

I want to repeat an icon

You mean like this: [genericon icon=star repeat=4]

Can I flip an icon?

Sure! [genericon icon=twitter rotate={90|180|270|flip-horizontal|flip-vertical} ]

How about changing the hover-color?

While I certainly could write that in, I decided not to. You totally can do this with CSS, however I feel you should only be changing color when there's an action, like hovering over a link, and generally you've already done that. But if you want to manually do it in your CSS, it would go like this: .genericon-twitter:hover {background-color:pink;color:purple;}

Why don't these work on IE 7?

Genericons itself does not come with fallback icons by default -- therefore you have to create them yourself. You can use HTML similar to this example: <span class="genericon genericon-warning"></span>

You can use the asterisk hack to serve a different icon to IE7 once you have saved the fallback icons to your project:

.genericon-warning {
    *background: url(fallback-icon.png) no-repeat center center;
    *text-indent: 100%;
}

Requires: 3.5 or higher
Compatible up to: 4.0
Last Updated: 2014-8-7
Downloads: 9,659

Ratings

5 stars
5 out of 5 stars

Support

4 of 5 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1
20,5,1