Archived topic
How to create custom category icons in WordPress
7 replies · Started by Mel on June 25, 2018
I am needing help inserting category icons in Wordpress. I am creating a website for a client that is mainly a blog and she wishes to have her categories labeled with custom icons. I am using a widget now that displays the posts on the homepage (screenshot is attached) and the icons that are currently showing are copy and pasted character icons. Is there a way to use custom icons or font-awesome icons for categories in Wordpress? The current widget is "LiveMesh Add-ons" and has downloaded many plugins that allow for category icons but none will work on this widget.
Hi there,
Which plugins for category icons have you tried?
What's the password to access the frontend of the site?
Thanks! :)
Hi Tom! Thank you for your quick response, I'm really impressed!
I have tried all the plugins I could find, currently I'm using Easy Category Icons. If you go to categories you'll see that I've uploaded images for the categories but they do not work. It only works if I paste in Unicode icons but that doesn't really work from a design standpoint.
Is there some custom code I can put into GeneratePress to use FontAwesome instead?
Thanks Tom, I really appreciate your help. I love GeneratePress, I have build dozens of client sites using your theme and everyone is so happy with the result.
-Mel
You could try using your own CSS instead of a plugin.
For example:
1. Add Font Awesome to your site: https://docs.generatepress.com/article/font-awesome/
2. Find the body class of the category. For example, if I right click + Inspect the Diet and Herbs category, I see this class in the <body> element: category-diet-herbs
3. Find the unicode of the icon you want to use: https://fontawesome.com/icons/magic?style=solid
3. Add the icon using CSS:
.category-diet-herbs .page-header h1:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0d0";
}Or, you can use an image:
.category-diet-herbs .page-header h1:before {
content: url(URL TO YOUR IMAGE);
}Hope this helps :)
Thank you so much!! I will give this a try and see how it goes. Really appreciate it, Tom. :)
You're welcome :)
Hi! Could you also help me with this as well. I have my own SVG icons in the asset library of GenerateBlocks and I want to change the folders to my own custom SVG icon.
Can you open a new topic for your question?
This one is very old.
Thanks!
