Genericon’d

---

Description

Genericon’d includes three icon sets:

• Genericons Neue – Generic looking icons, suitable for a blog or simple website.
• Social Logos – A repository of all the social logos used on WordPress.com
• Genericons Classic – The original! Generic looking icons as a Font, suitable for a blog or simple website.

By default, Genericons Neue and Social Logos are both active and use SVG sprites, not fonts. If you want to go back to displaying the icons as a font, you can do so via settings.

To use any of the Genericons icons on your WordPress site you can use basic HTML (for inserting in themes and functions) or shortcodes (for use in posts or widgets). You can adjust the size of the icons via css or, when using the shortcode, the size attribute. Default size is 16px for Genericons and 24 for Social Logos.

To display the Twitter icon: [genericon icon=twitter]

Privacy Policy

No remote calls are made with this plugin and no data is tracked.

---

FAQ

Installation Instructions

Install as a normal WordPress Plugin.

Usage

Add shortcodes to your posts, pages and even widgets to display a Genericons or Social Logos icon.

For example, to display the Twitter icon: [genericon icon=twitter]

I have an idea for an icon!

Great! I’m a monkey with a crayon! Seriously, though, I didn’t make Genericons, I have no artistic ability to make more. If I did, we’d have a unicorn one. Please file issues and requests for new icons directly with Genericons.

Have a desire for social icons like Twumlrbook? Submit that directly to Social Logos

What’s the difference between Genericons Neue, Social Logos, and ‘Classic’ Genericons?

• Genericons Neue are the replacements for Genericons, using SVG instead of fonts.
• Social Logos are where all the social logos like Twitter moved.
• ‘Classic’ Genericons are the old font icon pack you know and love

Are there any known conflicts?

Not at this time.

What are all the icon names?

On your WP dashboard, go to Appearance -> Genericon’d. The page there will list all the icons and their file names.

Can I add them to menus?

No. You can’t add shortcodes to menus at this time. There used to be a workaround with using the icon code, but since we’re not using Font Icons anymore, you can’t anymore unless you enable Legacy Font Icons.

What are Legacy Font Icons?

If you still want to have the old font-icons available, you can enable them by checking boxes on the settings page. It’s not recommended though, as the font will slow your page down.

How do I change colors?

Using CSS with SVGs is weird. Instead of something like .genericon {color:red;} you’ll have to use the fill parameter. For example, if you just want Twitter to be blue, add svg.social-logos-twitter {fill:blue;} and so on and so forth.

Why are some icons using `genericons` and others use `social-logos`?

Because in version 4.0, Genericons ceased development and moved to Genericons Neue. In doing so, they dropped support for all social media logos. Since I didn’t want to leave everyone out in the cold, I pulled in the Social Logos icon set.

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 do it 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?

This is less complicated than it looks but requires CSS:

svg.social-logos-twitter:hover {
    fill: purple!important;
}

If you wanted it to be for links only, then use a svg.social-logos-twitter:hover since you wrap the href around the 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.

---

Screenshots:

1. 

   Genericon'd help page

2. 

   Zaboo, patron avatar of Genericon'd

---

Other notes:

---

Latest Change log entry:

• 2018-01
• Updating some icons

---

Tags:

font icon, genericons, icons, ui

---

+ Jason's Comments