Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #217169

    Hi Guys,

    Can you give me the html for the social media icons that appear in the header here: http://www.naturaloutlook.com, so I can place these anywhere on the page. I would like to add them to the footer and center them.

    Thankyou

    Gary

    #217298

    Hey Gstar72!

    This is the html code of the social icons:

    <ul class="noLightbox social_bookmarks icon_count_5"><li class="social_bookmarks_linkedin social_icon_1"><a target="_blank" href="http://www.linkedin.com/in/GaryFlooks" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Linkedin"></a></li><li class="social_bookmarks_twitter social_icon_2"><a target="_blank" href="https://twitter.com/NaturalOutlook" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Twitter"></a></li><li class="social_bookmarks_gplus social_icon_3"><a target="_blank" href="https://plus.google.com/u/0/104229833865270222238/about" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Gplus"></a></li><li class="social_bookmarks_mail social_icon_4"><a href="mailto: (Email address hidden if logged out) " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Mail"></a></li></ul>

    Cheers!
    Ismael

    #217541

    Hi Ismael

    Thankyou, I added the HTML to the footer of http://www.naturaloutlook.com and only one icon is showing. I tried various code from ‘inspect element’ on Google, but couldn’t get it to work. Any ideas, please let me know?.

    Thankyou

    Gary

    #218306

    Hey Ismael,

    The code did work on the main page, just not in the footer, but thankyou.

    Could you please tell me how to align the icons center?

    I had this code from before, but I don;t think you can do a flat centre with css?:

    .avia_textblock .social_bookmarks li{
    float: left !important;
    list-style: none;
    margin-left: 0;
    }

    Thanks mate

    Gary

    #218307

    Sorry Ismael,

    Basically I am trying to replicate the icons in the header with the same width div container but have the icons centered, is that possible?:

    http://www.naturaloutlook.com

    Thankyou, thankyou

    Gary

    #218362

    Hey!

    It looks like you already achieved it:

    Cheers!
    Josue

    #218374

    Hey Josue

    The icons are off left, I put them in the centre of a 5 column set up to make them look centered…

    I am trying to replicate the width of the grey bar at the top of the site, with the icons centered.

    Thankyiu

    G

    #218443

    Hey G!

    Use this code:

    .avia-builder-el-16 {
        margin: 0 auto;
        width: 112px;
        float: none;   
    }

    Remove those white-space columns around the main one.

    Best regards,
    Josue

    #218475

    Hey Josue,

    I tried the above code but couldn;t get it to work, even in a one column set up.

    I have this code from before, can that be tweaked in anyway to align centre?:

    .avia_textblock .social_bookmarks li{
    float: left !important;
    list-style: none;
    margin-left: 0;
    }

    Thankyou

    #218477

    Hi!

    Is the parent element the one who needs to be targeted in order to center it, the .avia-builder-el-xx element. Remove those empty columns and just leave the icon column so i can try to tweak it live.

    Best regards,
    Josue

    #218480

    Hey Josue,

    Ok, so the icons are in a one column set up now.

    The following code was for the social icon alignment to the left of the main image here: http://www.naturaloutlook.com/about/ I can delete the icons from here if its too much of a headache.

    .avia_textblock .social_bookmarks li{
    float: left !important;
    list-style: none;
    margin-left: 0;
    }

    Thanks mate

    #218486

    Hi!

    You can set that code to be applied only to that Page:

    .page-id-11645 .avia_textblock .social_bookmarks li{
        float: left !important;
        list-style: none;
        margin-left: 0;
    }

    This code will center the icons in the home:

    .home .avia-builder-el-14 {
        margin: 0 auto;
        width: 120px;
        float: none;   
    
    }
    .home .avia-builder-el-14 li{
        margin-left: 0 !important;
    }

    Regards,
    Josue

    #218493

    Genius, how do you do it!….Thanks Josue.

    Is there any way to set the height of the grey ‘colour section’ to 30 px like the header?.

    Thankyou, thankyou

    #218496

    Hey Josue,

    To bump the icons to the right 10 px or so, do I just play with the width or add to the margin left?

    Thankyou

    #218498

    Hey!

    Try with this:

    .home #av_section_4 .template-page.content.twelve.alpha.units {
        padding: 8px 0 !important;
    }
    .home #av_section_4 {
        min-height: 0px !important;
    }

    Cheers! 
    Josue

    #218499

    Sorry Josue,

    Do I just add that to the CSS or delete the code you sent me before?

    Thanks

    Gary

    #218502

    Add it to the CSS.

    Best regards,
    Josue

    #218504

    Josue, you are a genius, sending you a virtual beer!.

    Can I shift the icons to the right 10 px?, then everything will be great. They ar just off centre if you look at the images above and the logo below.

    Sorry for being a pain

    Thanks mate

    Gary

    #218505

    Hey!

    Change that part of the code to this:

    .home .avia-builder-el-14 {
        margin: 0 auto;
        width: 111px;
        float: none;   
    }

    Best regards,
    Josue

    #218510

    Thanks Josue, its still off by about 20 pixels, but its much better. I appreciate your help.

    Thanks mate

    Gary

Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Social Media Icon HTML’ is closed to new replies.