Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 18, 2020 at 3:20 pm #1261290
    macmutsaers

    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!

    November 22, 2020 at 1:16 am #1262052
    Mike

    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

    November 23, 2020 at 10:43 am #1262299
    macmutsaers

    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.

    November 23, 2020 at 1:52 pm #1262369
    Mike

    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

    November 23, 2020 at 2:08 pm #1262372
    macmutsaers

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

    November 23, 2020 at 2:19 pm #1262377
    Mike

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

    Best regards,
    Mike

    November 23, 2020 at 2:22 pm #1262380
    macmutsaers

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

    November 23, 2020 at 2:57 pm #1262392
    Nikko

    Hi macmutsaers,

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

    Best regards,
    Nikko

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘column within colum’ is closed to new replies.