Bootstrap and FontAwesome Test
Trying out Bootstrap and FontAwesome for the first time for easy, great styling!
by Jonathan Lam
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="footer">
<div id="shareOn">Share</div>
<div id="icons">
<span class="fa fa-google" title="Share on Google!"></span>
<span class="fa fa-twitter" title="Tweet on Twitter!"></span>
<span class="fa fa-facebook" title="Share on Facebook!"></span>
</div>
</div>CSS
@import url(https://fonts.googleapis.com/css?family=Hind:700);
* {
box-sizing: border-box;
}
body, html {
margin: 0;
padding: 0;
height: 100%;
}
div#footer {
font-size: 30px;
background-color: 50px;
width: 100%;
height: 150px;
position: absolute;
bottom: 0px;
background-color: #444444;
color: #eeeeee;
padding: 20px 100px;
}
div#footer > div#shareOn {
text-align: center;
text-transform: uppercase;
font-family: hind;
font-weight: 700;
margin-bottom: 15px;
}
div#icons {
width: 400px;
margin: 0 auto;
}
div#icons > span.fa {
display: inline-block;
width: calc(100% / 3);
float: left;
text-align: center;
position: relative;
z-index: 3;
color: #444444;
transition: color .5s;
}
div#icons > span.fa::after {
content: " ";
background-color: #eeeeee;
height: 50px;
width: 50px;
display: block;
position: absolute;
top: -10px;
left: calc(50% - 25px);
border-radius: 100px;
z-index: -1;
margin-bottom: -20px;
transition: background-color .3s;
}
div#icons > span.fa:hover::after {
background-color: #444444;
}
div#icons > span.fa.fa-facebook:hover {
color: #3b5998;
}
div#icons > span.fa.fa-twitter:hover {
color: #55acee;
}
div#icons > span.fa.fa-google:hover {
color: #f44336;
}