Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 20, 2021 at 10:46 am #1295488
    Hanomax

    Hi there,
    in the Portfolio Entry tab content text, I am using icons. To make one icon (\ue8bc) bigger, I have added CSS as follows:

    .home [data-av_icon]:before{
    color:#777777!important;
    }
    .home .av_font_icon .av-icon-char{
    border-color:#777777!important;
    background:#777777!important;
    }
    span.av-icon-char {
    font-size:20px !important;
    line-height:16px !important;
    }
    .av_font_icon.avia-icon-animate {
    color:#777777 !important;
    opacity:1 !important;
    }
    .icon-square-sub{
    display:inline !important;
    }

    Now, I think this CSS will change all icons.
    What if I want a different size for another icon (\ue81e)?
    If I try it directly in the tab content text like

    [av_font_icon icon='ue81e' font='entypo-fontello' style='' caption='' size='10px' position='left' color='' link='' linktarget='' animation='' id='' custom_class='' av_uid='av-1qa5t' admin_preview_bg=''][/av_font_icon]

    then the CSS will override the 10 px size.

    How can I make icon sizes different for each icon, please?

    Thanks in advance,
    Max

    April 22, 2021 at 6:35 am #1295935
    Rikard

    Hi Max,

    Could you post a link to where we can see the icons in question please?

    Best regards,
    Rikard

    April 22, 2021 at 7:17 am #1295940
    Hanomax

    Hey Rikard,

    sure. Please see here the info button in the text. I want the icon smaller to fit the text size better: https://www.seychelles-ferry.com/ferry/mahe-ladigue#tab-id-1 It’s the icon left of “If you prefer other timings, …”
    Here is the \ue8bc icon (Luggage) which I had increased in size in the CSS: https://www.seychelles-ferry.com/ferry/mahe-ladigue#tab-id-2

    Thanks in advance,
    Max

    • This reply was modified 3 years, 7 months ago by Hanomax. Reason: Clarification which icon I meant
    April 24, 2021 at 5:03 am #1296467
    Rikard

    Hi,

    Thanks for that. Please try this shortcode instead:

    [av_font_icon icon='ue81e' font='entypo-fontello' style='' caption='' size='10px' position='left' color='' link='' linktarget='' animation='' id='' custom_class='' av_uid='av-1qa5t' admin_preview_bg=''][/av_font_icon]

    Then use CSS like this to target the icon in question:

    .my-icon .av-icon-char {
  font-size: 10px !important;
}

    Best regards,
    Rikard

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