Genericons: Can we customize?

[Adrian]

Hello Bill,

Besides using the default clock, phone, star, audio file and pointer icon, can we use a different icon such as the ones listed at http://genericons.com/#rating-half?

I have tried replacing the current one in the css, but it only displays the glyph code.

Thank you

[Bill Robbins]

Hello Adrian,

Good question there. You can use those. The icons that are used in the theme are made with a different set that’s bundled with the theme. To go with the Genericons, you’ll need to load that font for use on the front end of your site. There’s a plugin at https://wordpress.org/plugins/genericond/ that can do that for you.

From there you can then replace one of the built in styles with one of the genericons. Take the star one as an example to replace. You’ll need to edit the style.css file (you can do that by going to the Appearance section in your dashboard and choosing edit). The Custom CSS in the theme options will filter out this type of style for security reasons.

Here’s what to add at the bottom of the style.css file:

#nav-right a.star:before {
	content: "\f513";
	font-family: 'genericon';
}

and save your changes.

See how that works out for you. If you have any trouble let me know and also send over a link to where you’re working on these icons too.

Take care,
Bill

[Adrian]

Thank you so much Bill! You always provide great support and I really do appreciate that.

The only modification I had to make was as follows:

font-family: ‘genericons’;

Besides changing the actual icon code, I also left #nav-right a.star:before { intact as well as the Star icon under the Theme Options.

Thanks again Bill.

Adrian

[Bill Robbins]

Glad to hear you were able to get the icon you wanted that way. Have a great night and let me know if you need anything else.

Bill

[Author]

Posts