Customizing icons for each category

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 – https://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 - https://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;
}