[Support request] How to create custom category icons in WordPress

Home Forums Support [Support request] How to create custom category icons in WordPress

Home Forums Support How to create custom category icons in WordPress

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #608446
    Mel

    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.

    GeneratePress 2.1.2
    #608536
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Which plugins for category icons have you tried?

    What’s the password to access the frontend of the site?

    Thanks! πŸ™‚

    #608542
    Mel

    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

    #608552
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #608554
    Mel

    Thank you so much!! I will give this a try and see how it goes. Really appreciate it, Tom. πŸ™‚

    #608556
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.