Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 8, 2017 at 1:15 am #805410
    kvpacs

    Hello,
    I have the following inside a text block on our page. Is there a shortcode or CSS that can be added to change the background color of the icon?

    [av_font_icon icon='ue842' font='entypo-fontello' style='border' caption='' link='' linktarget='' size='80px' position='center' color='#ebce3b' custom_class='' admin_preview_bg=''][/av_font_icon]

    Thanks

    June 8, 2017 at 8:43 am #805459
    Sarah

    Hey kvpacs,

    Please try this in Quick CSS:

    .avia-builder-el-25 .av-icon-char {background-color:red !important;}

    You can also try enabling the custom CSS class field for ALB elements so you can add a custom class for that icon specifically.

    Best regards,
    Sarah

    June 8, 2017 at 8:59 pm #805740
    kvpacs

    Thanks so much Sarah,

    If you visit my test page, there are two text blocks that include an icon near the top of the page. The first one has your code applied through Quick CSS. For some reason, there isn’t a change to the background color of the icon.

    The second block has my custom class applied through the child style.css file, but the icon background color fills behind the icon as well as to the right and left.
    [av_font_icon icon='ue842' font='entypo-fontello' style='border' caption='' link='' linktarget='' size='80px' position='center' color='#ebce3b' custom_class='rca-iconbox-map' admin_preview_bg=''][/av_font_icon]

    Keep in mind, I’d like the background color to just affect a single icon. Can you see what I’m doing wrong?

    Theresa

    June 9, 2017 at 7:46 am #805885
    Sarah

    Hi!

    Okay, for the second block, the custom class is rca-iconbox-map, correct? Please apply this code instead:

    .rca-iconbox-map .av-icon-char {background-color:red !important;}

    The code I first gave you won’t work for the first block anymore because the element ID is avia-builder-el-11, so my code should have been adjusted to .avia-builder-el-11 .av-icon-char {background-color:red !important;}. It’s best to use custom classes instead, like in your second block.

    I hope that was clear and helpful!

    Best regards,
    Sarah

    June 9, 2017 at 6:51 pm #806182
    kvpacs

    Thank you Sarah, very helpful! That makes total sense now that I see it. And I prefer to use a custom class.

    Have a great weekend,
    Theresa

    June 11, 2017 at 7:52 am #806489
    Rikard

    Hi,

    Great, glad we could help and thanks for the feedback. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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