Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 14, 2016 at 3:05 am #660636
    hdpcr

    Hi

    Is it possible to change the background of an inline style icon from transparent to other and maintaining the Icon color. Something like the iconlist where you can define icon background, border and font colors separately.

    Thank you very much.

    July 14, 2016 at 4:53 am #660649
    Vinay

    Hey hdpcr,

    Yes i think it is, we cannot confirm until we are able to inspect the element in questions. Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Vinay

    July 14, 2016 at 3:58 pm #660906
    hdpcr

    Hi

    Please check on the example.

    Thank you very much

    July 14, 2016 at 4:09 pm #660918
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .av_font_icon.av-icon-style-border .av-icon-char {
    background: red;
    border: none;
}

    Regards,
    Yigit

    July 14, 2016 at 4:33 pm #660928
    hdpcr

    Hi

    Before adding that is it possible to have it as custom class? i mean something like #mycustomicon ,av_ etc.. so i can use it just for certain icons i need.

    Thank you very much

    July 15, 2016 at 12:46 pm #661223
    Rikard

    Hi,

    You could try following this to be able to add your own class for builder elements: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Rikard

    July 15, 2016 at 4:37 pm #661426
    hdpcr

    Hi

    I already have tat and have some custom classes in use, I’m asking about this case what would be the syntax of this CSS i should apply.

    Thank you very much

    July 15, 2016 at 4:48 pm #661429
    Yigit

    Hi!

    Please use following 

    .your-custom-class .av-icon-char {
    background: red !important;
    border: none !important;
}

    Regards,
    Yigit

    July 15, 2016 at 6:16 pm #661458
    hdpcr

    Hi

    Thank you very much for the code. It work great. Just a few things, It works with Stand alone but not with Inline icons, it displays a square in the back.Some times i will need to concatenate icons one next to other like this O O O text O O
    I guess it cannot be done with standalone icons only with inline icons so i’n nor sure if its possible to have the same result in inline icons.

    Thank you very much

    July 15, 2016 at 9:14 pm #661538
    Yigit

    Hi!

    Can you please try changing the code to following 

    .your-custom-class .av-icon-char {
    background: red !important;
    border: none !important;
    border-radius: 300px!important;
}

    That should solve “square issue” :)

    Regards,
    Yigit

    July 15, 2016 at 10:02 pm #661549
    hdpcr

    Hi Yigit

    I did replace the CSS and result is weird check by your self :)

    Thank you

    • This reply was modified 7 years, 9 months ago by hdpcr.
    July 17, 2016 at 10:44 pm #661822
    Yigit

    Hi,

    Can you please change the code to following one

    .my-custom-ico .av-icon-char {
    background: #bE202e !important;
    border: none !important;
    border-radius: 300px!important;
    min-width: 80px;
    font-size: 50px!important;
}

    Best regards,
    Yigit

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