-
Posts
-
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
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!
IsmaelHi 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
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
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?:
Thankyou, thankyou
Gary
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
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,
JosueHey 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
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,
JosueHey 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
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,
JosueGenius, 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
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
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!
JosueJosue, 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
Hey!
Change that part of the code to this:
.home .avia-builder-el-14 { margin: 0 auto; width: 111px; float: none; }Best regards,
Josue
- The topic ‘Social Media Icon HTML’ is closed to new replies.