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

    Hi,

    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!

    #1262052

    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
    2020-11-21_163000.jpg
    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,
    Mike

    #1262299

    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.

    #1262369

    Hi,
    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,
    Mike

    #1262372

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

    #1262377

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

    Best regards,
    Mike

    #1262380

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

    #1262392

    Hi macmutsaers,

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

    Best regards,
    Nikko

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

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