Tagged: social media icons
-
AuthorPosts
-
January 30, 2014 at 10:11 pm #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
January 31, 2014 at 6:02 am #217298Hey 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!
IsmaelJanuary 31, 2014 at 5:31 pm #217541Hi 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
February 2, 2014 at 12:10 am #218306Hey 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
February 2, 2014 at 12:21 am #218307Sorry 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
February 2, 2014 at 4:46 am #218362Hey!
It looks like you already achieved it:
Cheers!
JosueFebruary 2, 2014 at 5:51 am #218374Hey 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
February 2, 2014 at 6:23 pm #218443Hey 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,
JosueFebruary 2, 2014 at 7:48 pm #218475Hey 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
February 2, 2014 at 7:56 pm #218477Hi!
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,
JosueFebruary 2, 2014 at 8:01 pm #218480Hey 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
February 2, 2014 at 8:11 pm #218486Hi!
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,
JosueFebruary 2, 2014 at 8:25 pm #218493Genius, 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
February 2, 2014 at 8:29 pm #218496Hey 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
February 2, 2014 at 8:31 pm #218498Hey!
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!
JosueFebruary 2, 2014 at 8:33 pm #218499Sorry Josue,
Do I just add that to the CSS or delete the code you sent me before?
Thanks
Gary
February 2, 2014 at 8:43 pm #218502Add it to the CSS.
Best regards,
JosueFebruary 2, 2014 at 8:49 pm #218504Josue, 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
February 2, 2014 at 8:57 pm #218505Hey!
Change that part of the code to this:
.home .avia-builder-el-14 { margin: 0 auto; width: 111px; float: none; }
Best regards,
JosueFebruary 2, 2014 at 9:14 pm #218510Thanks Josue, its still off by about 20 pixels, but its much better. I appreciate your help.
Thanks mate
Gary
-
AuthorPosts
- The topic ‘Social Media Icon HTML’ is closed to new replies.