Category Icon in generatepress

[Phil]

Hi Guys,

many appologies if this has already been covered, is just have been searching, tried various plugins … all with no success.

I simply want to display a custom image/icon next to the category name in a post. Very little out there in the way of plugins, and the ones which I have tried do not display.

For info, the screenshot shown is from EssentialGrid used with generate press.

Any help would be greatly appreciated.

Best Regards,

Phil

[David]

Hi there,

any chance i can get temporary access to see the site ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Phil]

Hi David,

Sure! Generic access account is username: iluser passwd: iluser.

If you require admin access, please let me know and I will send on to you.

The site is not live as such, just in very early alpha stage!

Thanks in advance,

Phil

[Tom]

Hi there,

That username doesn’t seem to be working – can you double-check?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Phil]

Hi Tom,

many apologies, left the 1 off.

It’s”

Username: iluser1
Password: iluser1

Again, let me know if you require admin access, and will forward this on.

Thank you again.

Best Regards,

Phil

[David]

Try this CSS:

.esg-entry-cover .esg-tc a[rel~="category"]:before {
    content: '\f005';
    font-family: "Font Awesome 5 Free";
    margin-right: 0.5ch;
}

You need to change f005 for the FA Icon you want.
This will apply to ALL posts with a category tag.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Phil]

Awesome!!!!! Thank’s David, exactly what I wanted.

Just need to create and upload my own SVGs to FA now, so I can display those instead.

Huge thanks,

Phil

[Phil]

Sorry David, what I required was a specifc image for each catergory, so whenever that category is displayed, the relevant image/icon is displayed next to it.

Phil

[David]

Slight problem there – the plugin does not add the category-slug in its markup not even the rel tag…. hmmmm

Could try this:

.esg-entry-cover .esg-tc a[title~="Beach"]:before {
    content: '\f005';
    font-family: "Font Awesome 5 Free";
    margin-right: 0.5ch;
}

Using the title attribute to pick out a unique work in your categories should do it – if it does then only the beach categories ill display it

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Phil]

Yep, that absolutely did it! Just have to replicate same code now for each category, with different title and image that I require.

Thanks again David – definately solved it now!!!

Phil

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts