Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1226207

    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 1 month, 1 week ago by  Yigit.
    #1226634

    Hey demicoli00,

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

    Best regards,
    Rikard

    #1226647

    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

    #1227212

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

    Thanks!

    #1227344

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

    #1227390

    Hi polilili,

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

    Best regards,
    Rikard

    #1227513

    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.

    #1227830

    Hi polilili,

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

    Best regards,
    Victoria

    #1227928

    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 1 month ago by  Guenni007.
    #1230609
    This reply has been marked as private.
    #1230741

    Hi polilili,

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

    Best regards,
    Victoria

    #1230771
    #1231269

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

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

You must be logged in to reply to this topic.