Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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.

    #1351774

    Hey 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.
    2022-05-14_001.jpg
    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:
    2022-05-14_002.jpg
    To use multiple images use a different class for each image.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1353712

    Hi 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
    Page

    Thank you for your support,
    Manuela

    • This reply was modified 2 years, 6 months ago by famarinu.
    • This reply was modified 2 years, 6 months ago by famarinu.
    • This reply was modified 2 years, 6 months ago by famarinu.
    #1353750

    Hi,
    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.