Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1261290


    I would like to show an icon list with costum icons. I cannot generate the icons at fontello because I cannot make a compound path of them and the icons consists of multiple colors. Is there another way to do this, so the icon and text is lined out in the middle and are still shown together on tablet and mobilie (if neccecary I can make a different element for mobile only).

    Off couse, the website has to be finished before christmas, since the old site and hosting is going offline end of the year, and it also has to be translated in 2languages, so i am kind of in a hurry. If I had known before I would have chosen another theme, but because there was such a hurry, this also wasn’t in the specs.

    Hope you can help. THanks in advance!


    Hey macmutsaers,
    Sorry for the late reply, and thanks for the link to your page, I assume that you want to replace the 8 png images and replace with two big icon lists, such as this example
    First in the developer settings of the left icon list I used the class custom-list-icons to target the left list only, then I used this css, please adjust the URLs to your domain:

    #top .custom-list-icons li:nth-child(1) .iconlist_icon span.iconlist-char:before {
    	content: url(https://your-url/wp-content/uploads/2020/11/Value-of-money.png);
    #top .custom-list-icons li:nth-child(2) .iconlist_icon span.iconlist-char:before {
    	content: url(https://your-url/wp-content/uploads/2020/11/Long-life.png);
    #top .custom-list-icons li:nth-child(3) .iconlist_icon span.iconlist-char:before {
    	content: url(https://your-url/wp-content/uploads/2020/11/Professional-installation.png);
    #top .custom-list-icons .iconlist_icon {
    	background-color: transparent;

    please note that the :nth-child(1) number determines which icon getts which image, you can add more if you wish.
    Please give this a try.

    Best regards,


    Thank you very much!! It worked!
    Just one tiny little thing: can you make sure there is some more distance between the icons?
    Same as when you use the normal list.


    Glad this helped, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top .custom-list-icons .avia-icon-list li,
    #top .custom-list-icons-r .avia-icon-list li{
        padding: 0 0 60px 0 !important;

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

    Best regards,


    Yes!! Super! Thank you so very much!!
    Me very Happy :-)


    Glad to hear, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,


    Yes, you can close this ticket.
    Thanks again!!


    Hi macmutsaers,

    We’re happy to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘column within colum’ is closed to new replies.