Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1401169

    Hi there!
    Is there a way to replace icon circles with images?
    I would like to use different logo images instead of icons.

    Regards
    Santiago

    #1401241

    Hi Santiago,

    There’s a way but it would require some CSS code.
    Here’s how you can do it:

    1. Edit the icon circle, then go to Advanced > Developer Settings > Custom ID Attribute, then put my-icon-circle (you can change this with any name you like but you will need to change the id of the CSS code).
    2. Go to Enfold > General Styling > Quick CSS and add this CSS code:

    #my-icon-circle .avia-icon-circles-icon:before {
        display: none;
    }
    
    #my-icon-circle .avia-icon-circles-icon {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    #my-icon-circle .avia-icon-circles-icon-1 {
        background-image: url(https://website.com/wp-content/uploads/2023/03/logo1.png);
    }
    
    #my-icon-circle .avia-icon-circles-icon-2 {
        background-image: url(https://website.com/wp-content/uploads/2023/03/logo2.png);
    }
    
    #my-icon-circle .avia-icon-circles-icon-3 {
        background-image: url(https://website.com/wp-content/uploads/2023/03/logo3.png);
    }

    just change the background image url with the correct image url, if you use more than 3 logos/images then just follow the pattern and copy the last part of the code and replace 3 with 4.
    I hope this helps.

    Best regards,
    Nikko

    #1401554

    Thanks Nikko!!!

    #1401591

    Hi,

    Great, I’m glad that Nikko could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

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