Skip to content

Instantly share code, notes, and snippets.

@fahdi

fahdi/index.html

Forked from laurenclark/index.html
Created August 23, 2019 21:08
Show Gist options
  • Save fahdi/bbb80176363931fbfb3db2ef44eae375 to your computer and use it in GitHub Desktop.
Save fahdi/bbb80176363931fbfb3db2ef44eae375 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Social Media Icons
Raw
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link type="text/css" rel="stylesheet" href="style.css" media="screen">
</head>
<body>
<div class="footer-social-icons">
<h4 class="_14">Follow us on</h4>
<ul class="social-icons">
<li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-rss"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</body>
</html>
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
body {
font-family: 'Lato', sans-serif;
color: #FFF;
background: #322f30;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: #fff;
}
p > a:hover{
color: #d9d9d9;
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 1% 0 1% 0;
}
._12 {
font-size: 1.2em;
}
._14 {
font-size: 1.4em;
}
ul {
padding:0;
list-style: none;
}
.footer-social-icons {
width: 350px;
display:block;
margin: 0 auto;
}
.social-icon {
color: #fff;
}
ul.social-icons {
margin-top: 10px;
}
.social-icons li {
vertical-align: top;
display: inline;
height: 100px;
}
.social-icons a {
color: #fff;
text-decoration: none;
}
.fa-facebook {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #322f30;
}
.fa-facebook:hover {
background-color: #3d5b99;
}
.fa-twitter {
padding:10px 12px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #322f30;
}
.fa-twitter:hover {
background-color: #00aced;
}
.fa-rss {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #322f30;
}
.fa-rss:hover {
background-color: #eb8231;
}
.fa-youtube {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #322f30;
}
.fa-youtube:hover {
background-color: #e64a41;
}
.fa-linkedin {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #322f30;
}
.fa-linkedin:hover {
background-color: #0073a4;
}
.fa-google-plus {
padding:10px 9px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #322f30;
}
.fa-google-plus:hover {
background-color: #e25714;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment