This is a chunk of code I use on a lot of sites. It uses Font Awesome to supply the fonts, but everything else is handled via CSS.
Font Awesome
To start, you'll need a Font Awesome account / link to use to import your font files (which will be used to show the social network icons).
They will provide you with a script link you can put into your header.php, load into your functions.php and/or download locally and link locally...really, it's up to you how you load the script.
The HTML code is just a simple list:
<ul class="social-media-icons"> <li><a class="facebookBtn smGlobalBtn" href="https://www.facebook.com/yoursitehere" target="_blank"></a></li> <li><a class="linkedinBtn smGlobalBtn" href="https://www.linkedin.com/in/yoursitehere" target="_blank"></a></li> <li><a class="twitterBtn smGlobalBtn" href="https://twitter.com/yoursitehere" target="_blank"></a></li> <li><a class="youtubeBtn smGlobalBtn" href="https://www.youtube.com/user/yoursitehere" target="_blank"></a></li> <li><a class="pinterestBtn smGlobalBtn" href="https://www.pinterest.ca/yoursitehere" target="_blank"></a></li> <li><a class="instagramBtn smGlobalBtn" href="https://www.instagram.com/yoursitehere" target="_blank"></a></li> <li><a class="mailBtn smGlobalBtn" href="mailto:youremailaddresshere.com" target="_blank"></a></li> <li><a class="webBtn smGlobalBtn" href="https://webaddresshere/" target="_blank"></a></li> </ul>
The CSS
Copy and paste the code below into your style sheet. Colours are in there and can be adjusted as needed.
ul.social-media-icons{
padding-bottom:0;
padding-left:0!important;
}
ul.social-media-icons li{
display:inline-block;
}
.smGlobalBtn { /* global button class */
vertical-align:top;
display: inline-block;
position: relative;
cursor: pointer;
width: 40px;
height: 40px;
padding: 0px;
text-decoration: none;
text-align: center;
color: #06357a;
font-size: 30px;
font-weight: normal;
line-height: 40px;
border-radius: 50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
margin-left:5px;
margin-right:
transition:all 300ms;
}
.et-fixed-header .contact-info .smGlobalBtn {
width: 25px;
height: 25px;
line-height: 25px;
font-size: 10px;
margin-left:5px;
margin-bottom:0;
}
.facebookBtn, .youtubeBtn, .twitterBtn, .linkedinBtn, .instagramBtn, .pinterestBtn, .mailBtn, .webBtn{
background: #FFF;
}
.facebookBtn:before, .youtubeBtn:before, .twitterBtn:before, .linkedinBtn:before, .instagramBtn:before, .pinterestBtn:before, .mailBtn:before, .webBtn:before{
font-family: "FontAwesome";
color:#06357a;
}
/* facebook button class*/
.facebookBtn:before{ /* use :before to add the relevant icons */
content: "\f09a"; /* add facebook icon */
}
.facebookBtn:hover{
background: #a2daf4;
}
/* youtube button class*/
.youtubeBtn:before{
content: "\f167"; /* add youtube icon */
}
.youtubeBtn:hover{
background: #a2daf4;
}
/* twitter button class*/
.twitterBtn:before{
content: "\f099"; /* add twitter icon */
}
.twitterBtn:hover{
background: #a2daf4;
}
/* linkedin button class*/
.linkedinBtn:before{
content: "\f0e1"; /* add linkedin icon */
}
.linkedinBtn:hover{
background: #a2daf4;
}
/* instagram button class */
.instagramBtn:before{
content: "\f16d"; /* add instagram icon */
}
.instagramBtn:hover{
background: #a2daf4;
}
.pinterestBtn:before{
content: "\f0d2"; /* add pinteresticon */
}
.pinterestBtn:hover{
background: #a2daf4;
}
.mailBtn:before{
content: "\f0e0"; /* add mail icon */
}
.mailBtn:hover{
background: #a2daf4;
}
.webBtn:before{
content: "\f0ac"; /* add web link icon */
}
.webBtn:hover{
background: #a2daf4;
}
Comments
Post a Comment