Place more than one Icon with Text Item in Top Bar - Support

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

Author

Posts
April 16, 2024 at 8:31 pm #1440134

Eleina_Shinn
Participant

Hi,

I would like to place 2 or items in my top bar, each with an icon and text, so a phone icon with phone number, a license icon, with license number, and possible an email icon with email text, very much like this website: https://vanfraneyplumbing.com/fort-myers-plumbing-services/

But with Enfold, if I add more than one, then both icons are right at the beginning, lumped together, so it doesn’t separate them the way it’s written.
See the site I’ve started here: http://eleinar25.sg-host.com/

The Code I used is as follows:
[av_font_icon icon='ue840' font='entypo-fontello' style='' caption='Call Us' size='20px' position='left' color='#ffffff'] Licensed Plumber FL State License #1427999 | [av_font_icon icon='ue854' font='entypo-fontello' style='' caption='Call Us' size='20px' position='left' color='#ffffff'] Call or Text 941.270.2930

Could you tell me how to do this correctly for 2 or 3 items with icons? Thank you!

April 16, 2024 at 9:42 pm #1440137
Guenni007
Participant
on your setting now try this in quick css:
```
.phone-info div > span {
 display: inline-block;
 float: none;
}
```
but such a code is hard to edit so i wouldn’t work with enfold-shortcodes here – but pur html will work too.
f.e in phone-number input field

<a href="link1">Location</a><a href="link2">Contact</a><a href="tel:+490221123456">Phone</a>

see here on header meta: https://webers-testseite.de/text/

after that the classes will do their job in quick css:
```
.responsive #header_meta .phone-info span {
 color: #aaa;
 margin-right: 15px;
 font-size:16px
}

.phone-info span::before {
 font-family: entypo-fontello;
 font-size: 24px;
 padding-right: 5px;
 position: relative;
 top: 2px;
}

.phone-info .map::before { content: "\e842"; color: #900}
.phone-info .contact::before { content: "\e805"; color: #090}
.phone-info .tel::before { content: "\e854"; color: #009}
.phone-info .mail::before { content: "\e805"; color: #090}
```
April 18, 2024 at 7:00 pm #1440317

Eleina_Shinn
Participant

Wow, thank you so much! For now, I’ve added the first CSS you gave me, but I like the way you have it on the sample site (centered at the top), so yes, I’m going to try it. And this will be so great to have on hand for future sites. I love Enfold and use it for all my sites, it is only the header that can still be difficult to customize. (So hoping some day the header will be a page option like the footer, or have more options for buttons and icons etc in the top bar). Thank you thank you. Your support is amazing, as always! (going to try this tomorrow).

April 18, 2024 at 7:45 pm #1440319
Guenni007
Participant
getting the whole phone-info in the center position it is only one additional quick css ( best is then to have no top navigation in addition)
```
.phone-info {
 float: left !important;
 position: relative;
 left: 50%;
 transform: translateX(-50%);
}
```
it might be necessary to have on transform a bit different value ( like on my page it is -47%)
April 19, 2024 at 8:53 am #1440340

Rikard
Keymaster

Hi,

Thanks for helping out @guenni007 :-)

Best regards,
Rikard
Author

Posts

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

You must be logged in to reply to this topic.