Thanks for writing back.
Assuming that you've already added support for SVG images in WordPress ( ref: hidden link ), you can add a new image type term field for your taxonomy terms. For this example, suppose the slug of that term image field is "category-image".
You can get that term's image URL, using the Types Fields API shortcode like this:
( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/#image )
[types termmeta='category-image' output='raw' term_id='123456'][/types]
Note: You'll replace 123456 with the actual term's ID from where you'd like to get the term image URL.
You can use these image URLs in the custom CSS code to show them as a background image for the label of the filtering terms like this:
( example screenshot of the result: hidden link )
<style>
.wpv-filter-form .r-button label {
background-position: 14% 50%;
background-repeat: no-repeat;
background-size: 30% !important;
padding: 15px 20px 15px 35px !important;
}
.wpv-filter-form .r-button label[for="post_category-alla"] {
background-image: url(abc.com/wp-content/uploads/2021/06/generic-icon.svg);
}
.wpv-filter-form .r-button label[for="post_category-arbete"] {
background-image: url([types termmeta='category-image' output='raw' term_id='123'][/types]);
}
.wpv-filter-form .r-button label[for="post_category-boende"] {
background-image: url([types termmeta='category-image' output='raw' term_id='456'][/types]);
}
</style>
The above custom CSS code can be included in a new "Fields and Text" block added on the same page as the view, but making sure that it is not inside the view itself.
The first CSS block, prepares all the term filter labels to be shown with a background image.
The second CSS block, add a generic image as a background for the "Alla" label item and you'll replace 'abc.com/wp-content/uploads/2021/06/generic-icon.svg' part with your own generic icon's URL.
The third and fourth CSS blocks, add the background images to the "Arbete" and "Boende" items and you'll replace "123" and "456" with their term IDs respectively.
Similar to these two blocks, you can add more CSS blocks for the other term labels as well.
I hope this helps and please let me know if any step is not clear.
Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/
