Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • June 28, 2020 at 1:33 pm #1226207
    demicoli00

    Hi I have looked the forum and followed this post ( https://kriesi.at/support/topic/replace-bullets-with-icon-font/?login_error ) and added the following code:
    HTML

    <ul class=”icon-location”>
 	<li><a href="https://google maps link" rel="nofollow">Address</a></li>
<ul class=”icon-phone”>
 	<li><a href="tel:+000-000-000" rel="nofollow">(+000) 000 000 000</a></li>
<ul class=”icon-mail”>
 	<li><a href="mailto:<a href="mailto:hello@abc.com" rel="nofollow">hello@abc.com</a>“><a href="mailto:hello@abc.com" rel="nofollow">hello@abc.com</a></li>
CSS (in quick CSS)
ul.icon-location li {
list-style: none;
}
ul.icon-phone li {
list-style: none;
}
ul.icon-mail li {
list-style: none;
}
ul.icon-location li {
padding-left: 8px;
}
ul.icon-phone li {
padding-left: 8px;
}
ul.icon-mail li {
padding-left: 8px;
}

ul.icon-location li:before {
content: ‘\E724’;
font-family: ‘entypo-fontello’;
font-size: 23px;
font-weight: normal;
position: absolute;
left: 6px;
}
ul.icon-phone li:before {
content: ‘\1F4DE’;
font-family: ‘entypo-fontello’;
font-size: 23px;
font-weight: normal;
position: absolute;
left: 6px;
}
ul.icon-mail li:before {
content: ‘\2709’;
font-family: ‘entypo-fontello’;
font-size: 23px;
font-weight: normal;
position: absolute;
left: 6px;
}

.avia-icon-list .iconlist_content li {
list-style: none;
}

    However it did not work. Basically I want to achieve three icons in bullet format for phone, address and email.

    Thanks,

    • This topic was modified 4 years, 3 months ago by Yigit.
    June 30, 2020 at 4:34 am #1226634
    Rikard

    Hey demicoli00,

    Could you post a link to where we can see the results you are getting please?

    Best regards,
    Rikard

    June 30, 2020 at 7:04 am #1226647
    Guenni007

    the code above is complete?
    every opening tag – needs a closing one – so every <ul> needs a </ul>
    but why three lists ?
    i guess this will be enough code:

    <ul class="icon-bullets">
 	<li class="icon-location"><a href="https://google-maps-link" rel="nofollow">Address</a></li>
 	<li class="icon-phone"><a href="tel:+000000000" rel="nofollow">(+000) 000 000 000</a></li>
 	<li class="icon-mail"><a href="mailto: (Email address hidden if logged out) " rel="nofollow"> (Email address hidden if logged out) </a></li>
</ul>

    and:

    ul.icon-bullets li {
	list-style: none;	
}

ul.icon-bullets li {
	padding-left: 8px; 	
}

ul.icon-bullets li::before {
    font-family: 'entypo-fontello';
    font-size: 23px;
    font-weight: normal;
    position: absolute;
    left: -6px;
    width: 30px;
    text-align: center;
}

ul.icon-bullets li.icon-location:before { content: '\e842' }
ul.icon-bullets li.icon-phone:before { content: '\e854' }
ul.icon-bullets li.icon-mail:before { content: '\e805' }

    with text-align you decide where the icons are in the before containers.

    can not test your icon code

    July 1, 2020 at 10:55 am #1227212
    polilili

    Hello, I have a question. The bullet list does not show the icons on my page. Can you help fix it?

    Találd meg a gyönyöröd! – online kurzus a fantasztikus szeretkezésekért!

    Thanks!

    July 1, 2020 at 10:57 pm #1227344
    Guenni007

    where on your page should this happen – maybe a screenshot where you like to show those icons.

    July 2, 2020 at 6:36 am #1227390
    Rikard

    Hi polilili,

    I’m not sure what you are referring to, could you post a screenshot highlighting the problem please?

    Best regards,
    Rikard

    July 2, 2020 at 2:48 pm #1227513
    polilili

    Here is the screenshot showing on example: https://drive.google.com/file/d/1EsMYMTmAGxtegAO3HkAKpAh2SLtGIM2N/view?usp=sharing
    None of these circles on the page show the icon.

    July 3, 2020 at 8:46 pm #1227830
    Victoria

    Hi polilili,

    We cannot see the page, it’s in the maintenance mode. Please, share credentials in private.

    Best regards,
    Victoria

    July 4, 2020 at 3:10 pm #1227928
    Guenni007

    yes but the link of demicoli00 is something different- it shows how to have icons before a list of tel, email, location etc. f.e. in the footer widget or on top in phone-info field:

    what you are showing is a normal Advanced Layout Element : Icon List
    Click on the Icon List Element – click on one Element in the list and on that new popup you can choose the icon you like.

    On that linked page above i can see your icons.
    But if you got trouble on a different page see: https://kriesi.at/documentation/enfold/icon/#icons-are-showing-as-rectangular-boxes-

    • This reply was modified 4 years, 3 months ago by Guenni007.
    July 15, 2020 at 2:48 pm #1230609
    polilili
    This reply has been marked as private.
    July 15, 2020 at 9:34 pm #1230741
    Victoria

    Hi polilili,

    Did you add this as Guenni007 suggested? You need to enable CORS.

    Icon

    Best regards,
    Victoria

    July 15, 2020 at 10:52 pm #1230771
    Guenni007

    – yes – and the direct link to it is: https://kriesi.at/documentation/enfold/icon/#icons-are-showing-as-rectangular-boxes-

    July 17, 2020 at 1:31 pm #1231269
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

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