-
AuthorPosts
-
December 1, 2024 at 5:36 pm #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.jpgAlso 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.
December 2, 2024 at 7:27 am #1472683the 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.
December 2, 2024 at 7:28 am #1472684Hey 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,
IsmaelDecember 2, 2024 at 7:46 am #1472686Yes 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.December 2, 2024 at 5:01 pm #1472729This reply has been marked as private.December 3, 2024 at 8:07 am #1472766Hi,
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,
IsmaelDecember 4, 2024 at 1:12 am #1472834This reply has been marked as private.December 4, 2024 at 1:54 am #1472835This reply has been marked as private.December 4, 2024 at 1:55 am #1472836This reply has been marked as private.December 4, 2024 at 7:47 am #1472845December 4, 2024 at 11:11 am #1472885Hi,
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,
IsmaelDecember 4, 2024 at 11:39 am #1472896you will know better where your white png is ;)
December 4, 2024 at 5:12 pm #1472934This reply has been marked as private.December 5, 2024 at 6:25 am #1472969 -
AuthorPosts
- You must be logged in to reply to this topic.