Archived topic
Add Taxonomy Images
7 replies · Started by Janet Davis on January 20, 2018
Hello,
Is there a way to add taxonomy images so that each category or tag can have it's ow icon in front of it.
Thank you.
Jan
I think CSS might be the best bet.
For example, our Development category here on this site:
.category-development .page-header h1:before {
content: url(URL TO YOUR IMAGE);
}
Let me know :)
Hi Tom,
Thank you but it didn't do anything. This is what I put in the CSS.
.category-food .page-header h1:before {
content: url(https://simpleorganicguide.com/wp-content/uploads/2018/01/1024-x-682.png);
}
Maybe I am not calling what I am trying to do correctly. I wanted to change the icon before the category and tag label. These are below my blog posts.
By default the icon is a folder for the category, and for the tag it looks like a sales tag. I didn't see where I could attach a screen shot.
I hope this makes more sense. Thank you
Jan
Ah, I misunderstood.
Try this instead:
.entry-meta .tags-links:before {
content: url(URL TO IMAGE);
}
.entry-meta .cat-links:before {
content: url(URL TO IMAGE);
}
Tom,
Sorry I'm not communicating very well what I am trying to do. Mainly because I am not sure what it is called. I thought it would be simple to add little images before tags and categories. I a not sure if they are called icons, images, or ?. Should I be looking for a plug in that does this? Thank you again?
I used the following code for a tag in my css:
.entry-meta .tags-links:before {
content: url(https://simpleorganicguide.com/wp-content/uploads/2018/01/1024-x-682.png);
}
and it put a huge image on the page.
But it didn't connect to a specific tag.
To make the image smaller, we can specify a width and height:
.entry-meta .tags-links:before {
background-image: url(https://simpleorganicguide.com/wp-content/uploads/2018/01/1024-x-682.png);
background-size: 100% 100%;
display: inline-block;
width: 10px;
height: 10px;
content: "";
}
When it comes to smaller spaces like this, icons are usually preferred, as the images aren't large enough to tell what they are.
Tom,
Thank you this worked much better.
I will play with it for size.
I appreciate your help!!!
Jan
You're welcome :)