Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 6, 2025 at 8:33 pm #1487667
    vrhgmt744p

    HI, How do I make the left iconbox icons smaller? The icons is too large and touching the outside circle. I just want these 3 icon boxers smaller so I think I need to add a class seeing I have other iconsboxes on my homepage.

    August 7, 2025 at 3:45 am #1487674
    Ismael

    Hey vrhgmt744p,

    Thank you for the inquiry.

    You can use the following css code to adjust the size of the icon inside the iconbox.

    .iconbox_icon.avia-svg-icon img[is-svg-img=true], .iconbox_icon.avia-svg-icon svg:first-child {
    height: 0.5em;
    width: 0.5em;
    top: -8px;
    position: relative;
}

#top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
    line-height: 1.5em;
    display: block;
    top: 0;
    position: relative;
    font-size: 0.6em;
}

    If you need this applied to specific icons, try adding a custom css class to the element. Please refer to the documentation below.

    — https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

    Best regards,
    Ismael

    August 7, 2025 at 7:19 pm #1487711
    vrhgmt744p

    Thanks. I went ahead and added a custom class. Is this correct? and than the class is iconstyle

    .iconstyle .iconbox_icon.avia-svg-icon img[is-svg-img=true], .iconbox_icon.avia-svg-icon svg:first-child {
    height: 0.5em;
    width: 0.5em;
    top: -8px;
    position: relative;
}

.iconstyle #top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
    line-height: 1.5em;
    display: block;
    top: 0;
    position: relative;
    font-size: 0.6em;
}
    August 8, 2025 at 8:37 pm #1487755
    Mike

    Hi,
    It looks like your “custom class” iconstyle is actually a ID, perhaps you added it to the wrong field in the developer tab.
    To correct the above css, try this:

    #iconstyle .iconbox_icon.avia-svg-icon img[is-svg-img=true], .iconbox_icon.avia-svg-icon svg:first-child {
    height: 0.5em;
    width: 0.5em;
    top: -8px;
    position: relative;
}

#top #iconstyle .avia-font-entypo-fontello, body #iconstyle .avia-font-entypo-fontello, html body #iconstyle [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
    line-height: 1.5em;
    display: block;
    top: 0;
    position: relative;
    font-size: 0.6em;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    August 8, 2025 at 10:25 pm #1487770
    vrhgmt744p

    HI, Im not sure why it is isnt working on my end. I cleared the cache. I’m trying to apply the code the these 3 icons only (see private screenshot) I have provided a temp login as well,

    August 10, 2025 at 8:28 pm #1487814
    Mike

    Hi,
    Try adjusting the size like this:

    #iconstyle .iconbox_icon.avia-svg-icon img[is-svg-img=true], .iconbox_icon.avia-svg-icon svg:first-child {
    height: 0.3em;
    width: 0.3em;
    top: -10px;
    position: relative;
}

#top #iconstyle .avia-font-entypo-fontello, body #iconstyle .avia-font-entypo-fontello, html body #iconstyle [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
    line-height: .3em;
    display: block;
    top: 0;
    position: relative;
    font-size: 0.3em;
}

    Best regards,
    Mike

    August 11, 2025 at 9:25 pm #1487858
    vrhgmt744p

    When I add that code it changes all the icon boxes not just the left aligned ones. I just want the iconsbox elements where the icons on the left to change.

    August 11, 2025 at 9:55 pm #1487859
    Mike

    Hi,
    I believe that I found the error in the css, this instead:

    #iconstyle .iconbox_icon.avia-svg-icon img[is-svg-img=true],#iconstyle .iconbox_icon.avia-svg-icon svg:first-child {
    height: 0.3em;
    width: 0.3em;
    top: -10px;
    position: relative;
}

#top #iconstyle .avia-font-entypo-fontello, body #iconstyle .avia-font-entypo-fontello, html body #iconstyle [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
    line-height: .3em;
    display: block;
    top: 0;
    position: relative;
    font-size: 0.3em;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    August 11, 2025 at 11:38 pm #1487861
    vrhgmt744p

    Thanks, yes this did work. The icons are a little small – how would I adjust? Also for Education & Training the icons is not showing up…

    August 11, 2025 at 11:55 pm #1487863
    Mike

    Hi,
    Try changing the height and font size to suit:
    Screen Shot 2025 08 11 at 5.52.34 PM

    Best regards,
    Mike

    August 12, 2025 at 7:55 pm #1487922
    vrhgmt744p

    Thank you. I am able to get the first 2 icons positioned and sized correctly but the third on is still now showing up.

    August 12, 2025 at 8:19 pm #1487924
    Mike

    Hi,
    It looks like you used SVG icons for the first two, but not the third, I corrected.
    Please check now.

    Best regards,
    Mike

    August 12, 2025 at 10:36 pm #1487936
    vrhgmt744p

    Thank You

    August 12, 2025 at 11:22 pm #1487938
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Iconbox Icon Smaller’ is closed to new replies.