Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 21, 2018 at 5:34 am #930289
    nickgin

    Hello Sirs,

    I would like to have an telephone icon + phone number and also email icon + email address in top bar.
    I have used the following shortcode in Header –> Extra Elements –> Phone/Small info:

    [av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' size='20px' position='left' color='' admin_preview_bg='']211.411.0600

    Now I would like to insert also one more icon + email address next to telephone.
    I tried to do that but I didn’t manage with css styling. Something I do wrong with classes?
    I need your precious support.

    See the screenshot: https://prnt.sc/iu3smw

    Thank You in advance.

    Best regards,
    Nick

    March 22, 2018 at 6:40 am #931051
    Ismael

    Hey nickgin,

    Thank you for using Enfold.

    These shortcodes work in my installation.

    [av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' size='20px' position='left' color='' admin_preview_bg='']PHONE[av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' size='20px' position='left' color='' admin_preview_bg='']EMAIL

    Best regards,
    Ismael

    March 22, 2018 at 3:03 pm #931355
    nickgin

    Hi Ismael,

    Thank you so much for your response and your support.

    I appied your code but I am facing the following issue: https://prnt.sc/iusb33

    I am waiting your news.

    Thank you in advance.

    Best regards,
    Nick

    March 22, 2018 at 6:15 pm #931517
    Vinay

    Hi,

    Please add the correct phone/email info in the below HTML and paste(replace old code) it in Enfold > Header > Extra Elements > Phone Number or small info text:

    
<a class="phone-info-top" href="mailto: (Email address hidden if logged out) "> Email us </a>
<a class="phone-info-top" href="tel:5555555555">Call us 555-555-5555 </a>

    Add the below CSS for multiple phone numbers to show up on same a line.

     
/* Phone info */
.phone-info-top {
  display:inline-block!important;
  padding:4px 10px;
}

    Best regards,
    Vinay

    March 23, 2018 at 2:13 am #931728
    nickgin

    Hi Vinay,

    Thank you very much for your excellent support!
    I really appreciate it!

    Your code really worked!

    Best Regards,
    Nick

    March 23, 2018 at 9:46 am #931844
    Victoria

    Hi nickgin,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    November 25, 2025 at 7:11 pm #1491809
    Eleina_Shinn

    Hi,

    I’m trying to do the same thing, but when I add the new code, there are no longer icons before the email adddress and the phone number, which I would like. Here’s the code I added, using your suggestions above:

    Enfold Theme Options > Header > Extra Elements > Phone Number Or Small Info Text:

    (Email address hidden if logged out) “> (Email address hidden if logged out)
    941-462-9082

    Custom CSS:

    /* Phone info */
    .phone-info-top {
    display:inline-block!important;
    padding:4px 10px;
    }

    I would like the icons before the email (ue805) and phone (ue854) – and I would like them to be a different color than the text, like this site: https://www.coastlinetree.com/

    How can I accomplish this?

    Thank you so much!

    November 25, 2025 at 7:13 pm #1491810
    Eleina_Shinn

    My html is just as you instructed, like this:

    • This reply was modified 14 hours, 43 minutes ago by Eleina_Shinn.
    November 26, 2025 at 6:07 am #1491821
    Ismael

    Hi,


    @Eleina_Shinn    : Try to use this html in the phone number field:

    
<div style="display:flex;align-items:center;gap:20px;">
<div style="display:flex;align-items:center;gap:6px;">[av_font_icon icon='phone' font='svg_entypo-fontello' size='13px' position='left' av_uid='av-mifjh9cz' sc_version='1.0'][/av_font_icon] 941-462-9082</div>
<div style="display:flex;align-items:center;gap:6px;">[av_font_icon icon='ue805' font='entypo-fontello' size='13px' position='left' av_uid='av-emailicon' sc_version='1.0'][/av_font_icon]  (Email address hidden if logged out) </div>
</div>

    Please don’t hesitate to open another thread if you need additional assistance.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘icons in top bar (telephone+email)’ is closed to new replies.