Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #271305

    Hi all,
    I’ve seen this query previously but I’m having issues customising it. I have 3 icon boxes on the same page and I want each icon to be a different colour.

    I found this code
    .avia-builder-el-5 .iconbox_icon { background-color: #4f0c56!important; }
    .avia-builder-el-7 .iconbox_icon { background-color: #273691!important; }
    .avia-builder-el-9 .iconbox_icon { background-color: #b4d334!important; }

    but it only makes all 3 icons green (#b4d334) See here

    How do I make each icon a different colour?

    Many Thanks


    Hey ElementArt!

    Please turn on custom CSS field for Avia Layout Builder elements –
    then add custom class to each iconbox element and use following code instead

    .custom-class-1 .iconbox_icon { background-color: orange !important; }
    .custom-class-2 .iconbox_icon { background-color: red !important; }

    Best regards,


    Thanks Yigit,

    I’ve managed to add the option for the CSS field but I’m not sure how to add custom class to each box.
    I know it is a very stupid question but for the above code to work what to I put in the CSS field? This is what I used but it isn’t working as all the icons have reverted to red

    afi-iconbox-col-1 to the field and then

    .custom-class-afi-iconbox-col-1 .iconbox_icon { background-color: orange !important; } to the Quick CSS


    hi Yigit,

    I finally got it – I can’t believe I didn’t see it before… in my defence I’m not a programmer so it takes me a while to wrap my head around it :)

    Many Thanks for all your help



    You are welcome Grace, glad you figured it out! :)
    Let us know if you have any other questions or issues


Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Coloured IconBox Icons’ is closed to new replies.