Support » Theme: Customizr » Customizing icons for each category

  • Resolved Alex Sirota

    (@asirota)


    On http://www.insightaas.com we have several categories of posts. Is it possible to change the default icon for the category to be unique on a per category basis? Ideally I’d like to use a set of icons, one icon per category. I don’t want to change the post/page icon but rather the default “folder” icon and set a different icon for each category.

    Thanks for any insight you can lend.

    Alex

Viewing 5 replies - 1 through 5 (of 5 total)
  • This is the css rule :

    .archive.category .archive-header .format-icon:before {
        top: 2px;
        font-size: 2em;
        content: "\1F4C1";
    }

    you can add to your child theme style.css something like this :

    .archive.category-control .archive-header .format-icon:before {
        content: "\1F4C1"; /*change this value*/
    }

    .archive.category-“slug”. The font-family used now is entypo, But you can change it.
    Or set a background image etc etc

    Thank you this works really great… I will try images as well and see if I can get it to work with our custom images.

    Here’s how images work instead of the entypo iconography:

    /* modifying category icons – each category is controlled via .archive-category-<category slug> */
    /* the default approach uses entypo font – character map here – http://www.entypo.com/characters/ */
    /* the approach below uses a custom image */

    If the category slug is “cloud” then to customize its image you would use:

    .archive.category-cloud .archive-header .format-icon::before {
    content: url(‘<path to image file>’);
    top: 5px;
    font-size: 2.5em;
    padding: 0 0px 0 0;
    }

    Thanks for this Alex.

    (p.s. remember to use backticks in the code so it displays properly here)

    Oops let’s try again.

    /* modifying category icons - each category is controlled via .archive-category-<category slug> */
    /* the default approach uses entypo font - character map here - http://www.entypo.com/characters/ */
    /* the approach below uses a custom image */
    
    If the category slug is "cloud" then to customize its image you would use:
    
    .archive.category-cloud .archive-header .format-icon::before {
    content: url('<path to image file>');
    top: 5px;
    font-size: 2.5em;
    padding: 0 0px 0 0;
    }
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Customizing icons for each category’ is closed to new replies.