Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 9, 2020 at 8:00 pm #1266079
    MyGirlFriday805

    I am trying to add 2 icons in the small bar above the header, but the icons want to jam together at the beginning of the text. The best I can do is get them on 2 seperate lines, but I don’t like that look. Plese help.

    Here’s what I have been inputting:
    <p style=”text-align: left;”>[av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' size='15px' position='left' color='' link='' linktarget='' animation='' id='' custom_class='' av_uid='' admin_preview_bg=''][/av_font_icon](805) 658-0109 | (Email address hidden if logged out) “> (Email address hidden if logged out) [av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' size='15px' position='left' color='' link='' linktarget='' animation='' id='' custom_class='' av_uid='' admin_preview_bg=''][/av_font_icon]</p>

    December 9, 2020 at 9:12 pm #1266122
    Victoria

    Hey MyGirlFriday805,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    December 9, 2020 at 11:12 pm #1266153
    MyGirlFriday805

    Thank you for your reply. I will add the url, but for whatever reason the page will not open. I will also attach a screenshot of what I am talking about. http://mgf805build.com/
    image: crammed icons on small bar above header

    December 10, 2020 at 3:37 pm #1266315
    Rikard

    Hi,

    Thanks for that. If you replace this in the shortcode:

    position='left'

    with this:

    position=''

    then it should not float over to the left.

    Best regards,
    Rikard

    December 10, 2020 at 3:45 pm #1266317
    MyGirlFriday805

    If you see my first message above they both are positioned left.

    December 10, 2020 at 4:25 pm #1266322
    Guenni007

    maybe you try only html and a bit of quick css:
    put this to your phone-info field:
    <a href="tel:8056580109"><span class="tel">(805) 658-0109</span></a> | <a href="mailto: (Email address hidden if logged out) "><span class="mail"> (Email address hidden if logged out) </span></a>

    The telephone number in the href should be with maybe countrycode we in Germany got +49 – you will know your whole number ( no spaces in it)
    in the span itself you can write what you like to have – maybe only Mail and Phone

    then to quick css:

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

.phone-info .mail::before { content: "\e805"; color: #090}
.phone-info .tel::before { content: "\e854"; color: #009}

    if you do not need extra color for the icons – put a uniform color to the span:before rule and erase it in mail and tel

    December 10, 2020 at 4:48 pm #1266325
    Guenni007

    or with the animated icons:

    <p class="ontop"><a href="mailto: (Email address hidden if logged out) ">[av_font_icon icon='ue805' font='entypo-fontello' size='24px' position='left'][/av_font_icon] (Email address hidden if logged out) </a></p><p class="ontop"><a href="tel:8056580109">[av_font_icon icon='ue854' font='entypo-fontello' size='24px' position='left'][/av_font_icon](805) 658-0109</a></p>

    and:

    .phone-info  p.ontop {
    display: inline-block;
    margin-right: 10px;
}

    but then you had to style the postition of the icons.
    maybe a mod could help you to do that

    December 11, 2020 at 9:27 am #1266484
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    If you need any further help on the topic @MyGirlFriday805, then please try to explain your intentions a bit further.

    Best regards,
    Rikard

    December 11, 2020 at 10:47 pm #1266679
    MyGirlFriday805

    @Rikard fixed the issue, I just wasn’t sure which ‘position=’left” he was speaking of. I removed the second one and it works great, thank you!

    December 12, 2020 at 1:50 am #1266701
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Help putting icons in one row on small bar in header’ is closed to new replies.