Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 23, 2024 at 2:37 pm #1440603
    northorie

    Hi,
    I would like to exchange the icons to a normal picture or plain Text, just the way that I aksed for the symbol box:

    But it doesn’t seem to work.
    I also want to make the space for the icon much bigger and whole circle is way tooo big and can’t find the option to change the overall size.

    Link on private data

    Thanks in advance

    April 24, 2024 at 7:32 am #1440649
    Ismael

    Hey northorie,

    Thank you for the inquiry.

    There is no option for this by default, but you can apply the image as background using css.

    Example:

    .av-icon-circles-container.av-lvddi3r8-7ef69dade13d6c6bdb3c96c9de9ade48 .avia-icon-circles-inner .avia-icon-circles-icon:nth-child(1) {
    background: red;
}

.av-icon-circles-container.av-lvddi3r8-7ef69dade13d6c6bdb3c96c9de9ade48 .avia-icon-circles-inner .avia-icon-circles-icon:nth-child(2) {
    background: orange;
}

.av-icon-circles-container.av-lvddi3r8-7ef69dade13d6c6bdb3c96c9de9ade48 .avia-icon-circles-inner .avia-icon-circles-icon:nth-child(3) {
    background: blue;
}

    The css code above should adjust the background color of the first three icons in the circle. You can replace the colors with a background image and adjust the element selector (av-lvddi3r8-7ef69dade13d6c6bdb3c96c9de9ade48) accordingly.

    Best regards,
    Ismael

    April 24, 2024 at 6:40 pm #1440709
    northorie

    Hi,
    i don’t want to change the background color.

    I want to change to an image, instead of an icon. How to?
    Can I make one item “open”, so that the text will be displayed by default?
    The icon circle is huge on desktop, but I can’t find a way to get it smaller

    • This reply was modified 8 months ago by northorie.
    April 25, 2024 at 3:37 am #1440754
    Ismael

    Hi,

    I want to change to an image, instead of an icon. How to?

    As mentioned above, you can replace the background color with a background image.

    Example:

    .av-icon-circles-container.av-lvddi3r8-7ef69dade13d6c6bdb3c96c9de9ade48 .avia-icon-circles-inner .avia-icon-circles-icon:nth-child(3) {
    background: url('img url');
}

    Best regards,
    Ismael

    April 25, 2024 at 1:10 pm #1440821
    northorie

    I tried, but it doesn’t work.

    April 26, 2024 at 9:24 am #1440926
    Rikard

    Hi,

    Thanks for the update. Did you add your own image URL in the snippet that Ismael posted? Please see example in private.

    Best regards,
    Rikard

    April 26, 2024 at 1:00 pm #1440951
    northorie

    Yes I did, but it doesn’t show the image.
    Nevermind, I try it with another Icon.
    I posted my other issues on different posts. So this one can be closed.

    Thank you

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Adjustments for Icon circle’ is closed to new replies.