-
AuthorPosts
-
May 12, 2022 at 3:47 pm #1351575
Hi,
I would like to know if you can insert an image instead of an icon in the “Icon Box”. Otherwise, if I can do the same graphics as “Icon Box” but insert my image instead of an icon.
Thank you for your support.May 14, 2022 at 1:45 pm #1351774Hey Manuela,
Thank you for your patience, to use an image instead of an icon in the icon box element, add a custom class to the icon box you wish to change, for this example we will use custom-image-icon note there is no dot before the class.
then add this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:.custom-image-icon .iconbox_icon { background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png); height: 23px; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } .custom-image-icon .iconbox_icon:before { display: none; }
the expected results:
To use multiple images use a different class for each image.
After applying the css, please clear your browser cache and check.Best regards,
MikeJune 1, 2022 at 11:04 am #1353712Hi Mike,
thank you for your support.
I entered the code as you suggested, and created and placed the class in the icon element, but the icon is not replaced.
This the page
Some screenshot: CSS
Class
PageThank you for your support,
ManuelaJune 1, 2022 at 2:03 pm #1353750Hi,
Thanks for the screenshots, and adding the custom class, the element you are using is the Icon instead of the Icon Box, for this element try this css instead:.sngmng .av-icon-char { background-image: url(//leagrowingpeople.com/wp-content/uploads/2022/04/consciousuncoupling.png); height: 40px; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } .sngmng .av-icon-char:before { opacity: 0; }
After applying the css, please clear your browser cache and check.
Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.