-
AuthorPosts
-
March 21, 2018 at 5:34 am #930289
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,
NickMarch 22, 2018 at 6:40 am #931051Hey 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='']EMAILBest regards,
IsmaelMarch 22, 2018 at 3:03 pm #931355Hi 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,
NickMarch 22, 2018 at 6:15 pm #931517Hi,
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,
VinayMarch 23, 2018 at 2:13 am #931728Hi Vinay,
Thank you very much for your excellent support!
I really appreciate it!Your code really worked!
Best Regards,
NickMarch 23, 2018 at 9:46 am #931844Hi nickgin,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
VictoriaNovember 25, 2025 at 7:11 pm #1491809Hi,
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-9082Custom 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 #1491810My 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 #1491821Hi,
@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 -
This reply was modified 14 hours, 43 minutes ago by
-
AuthorPosts
- The topic ‘icons in top bar (telephone+email)’ is closed to new replies.
