Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1472660

    Hello
    I need help with changing the icon list to the client’s logo icon. I understand these are through icon-fonts from Fontello.com However what is the css code needed to that I can use my client’s logo image in one section for the icon list? Can you please help me with this?

    Here is a link showing the section that the client would like the globes to be changed to her logo icon
    https://staging.profoundplanning.com/wp-content/uploads/2024/12/Screenshot-2024-12-01-113340.jpg

    Also is there a way to add more space between the icon and the text next to the icon? It is too tight in that line.

    #1472683

    the icon you like to insert – is it a colored icon or do you like to use the white globe icon with that green background?

    if you like to use it as monochrome icon – i would upload that monochrome globe as svg to fontello and create your custom icon font set.
    Then you can use it like all the other entypo-fontello icons.

    if you like to use that bicolor globe icon – you can set those icons to display none and insert via pseudo container your colored icon:

    #top #main ul.avia-icon-list.av-iconlist-small  li:before {
        content: "" !important;
        width: 40px;
        height: 40px;
        float: left;
        margin-left: -10px;
        margin-right: 10px;
        background-color: transparent;  /**** with background - replace  ***/
        background-image: url(/wp-content/uploads/globe-color.png);
        background-size: 30px 30px;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 100%;
        top: -3px;
        position: relative;
    }
    
    #top .avia-icon-list-container .iconlist_icon {
      display: none 
    }

    But: to better select your small icon list – it would certainly be advisable to use a custom class.

    #1472684

    Hey Maggie,

    Thank you for the inquiry.

    Try to use this css code to replace the icon with a custom image:

    .avia-icon-list-container.av-m3t1foql-7e88455370655a2aff70020b470afc59 .iconlist-char:after {
        content: '';
        display: block; 
        width: 50px; 
        height: 50px;
        background: url('IMAGE URL HERE') no-repeat center center;
        background-size: contain; 
    }
    
    .avia-icon-list-container.av-m3t1foql-7e88455370655a2aff70020b470afc59 .iconlist-char:before {
        display: none;
    }

    Make sure to adjust the image URL.

    Best regards,
    Ismael

    #1472686

    Yes replacing it at the pseudo-container of the char itself maybe the better option. I do not know where the animation of the list will do the job.
    But i guess it will be the char – so try Ismaels code first.

    #1472729
    This reply has been marked as private.
    #1472766

    Hi,

    Thank you for the update.

    We added Guenni’s code in the Quick CSS field and updated the image URL. Please make sure to purge the cache before checking the page.

    Best regards,
    Ismael

    #1472834
    This reply has been marked as private.
    #1472835
    This reply has been marked as private.
    #1472836
    This reply has been marked as private.
    #1472845

    well i can see on your staging site all icons now:

    #1472885

    Hi,

    For the list in the footer container, please add this at the very bottom:

    #top #main #footer-page ul.avia-icon-list.av-iconlist-small li:before {
        background-image: url(/wp-content/uploads/2024/12/ProfoundPlanning_Stacked_White.png);
    }

    Best regards,
    Ismael

    #1472896

    you will know better where your white png is ;)

    #1472934
    This reply has been marked as private.
    #1472969

    Hi,

    Did you try the css code above?

    #top #main #footer-page ul.avia-icon-list.av-iconlist-small li:before {
        background-image: url(/wp-content/uploads/2024/12/ProfoundPlanning_Stacked_White.png);
    }

    Best regards,
    Ismael

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