I put Font Awesome icons (FB, Twitter, Steam) that look like images but are actually text in my footer, and I added some other linked text. Now my footer shows the icons next to the text, but I want my icons to be on top of the text and centered just like this site: see footer here. This website also has hover, and I know the command for that, but I don't know where to include it.
My code:
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
header {
position: fixed;
z-index: 10;
width: 100%;
height: 87px;
background-color: #212022;
border-bottom:2px groove #cc9900;
}
main {
background-color: #181719;
}
.centered {
margin: 160px auto;
padding:30px 50px;
width: 800px;
color: #efefef;
background: #1c1b1d;
border: 1px groove #cc9900;
}
.centered h2 {
text-align:center;
}
footer {
width: 100%;
height: 164px;
background-color : #212022;
border-top: 1px groove #cc9900;
}
p{
color: white
}
@font-face {
font-family: "csgofontlight"
src: url('../fonts/csgofontlight.tff') format('truetype');
}
#logo{
width: 520px;
height: 80px;
background: url<'/StaffPage/img/logo.png'> no-repeat scroll center;
margin-top:3px;
left: 108px;
float: left;
position: absolute;
text-indent:-9999px;
}
#steamlogin{
width: 154px;
height: 23px;
background: url('/StaffPage/img/steamlogin.png');
margin-top: 34px;
right: 108px;
float: right;
position: absolute;
text-indent:-9999px;
}
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
header ul {
list-style:none;
margin:33px auto;
width:600px;
text-align:center;
}
header ul li{
display:inline-block;
margin:10px;
}
header ul li a {
color: #949494;
text-decoration : none;
font-size : 100%;
position: absolute; top: 34px; right: 300px;
font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
header ul li a:hover {
color: #E6E6E6;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
#howto {
position: absolute; top: 34px; right: 400px;
}
footer ul {
list-style:none;
margin:50px auto;
width:1000px;
position: absolute; top: 620px; right: 310px;
}
footer ul li {
display:inline-block;
margin:10px;
}
footer ul li a {
color: #717171;
text-decoration : none;
font-size : 100%;
font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
footer ul li a:hover {
color: #DADADB;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
h2 {
font : 20px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
color: #DDDDDD;
}
main ul li {
font : 15px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
color: #949494;
margin: 0 0 10px 0;
}<!DOCTYPE html>
<html>
<head>
<title>CSGOShuffle Staff Team</title>
<link rel="stylesheet" type="text/css" href="/StaffPage/css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<link rel="shortcut icon" href="/StaffPage/icon.ico" />
<body class="Site">
<header>
<div class="wrapper">
<div id="logo"></div>
<a href="//csgoshuffle.com" id="logo">Range Web Development</a>
<div id="steamlogin"></div>
<a href="//csgoshuffle.com/login" id="steamlogin">Range Web</a>
</div>
<ul>
<li><a href ="//support.csgoshuffle.com" target="_blank">Support</a></li>
<li><a id="howto" href ="//csgoshuffle.com/howto" target="_blank">How to Play</a></li>
</ul>
</header>
<main class="Site-content">
<div class="centered">
<h2>STAFF TEAM</h2>
<ul>
<li>Our mod chimbobway can deal with all missing skins deals , his account link is </li>
<h2>Missing Value , here is fix</h2>
<ul>
<li>Our Mod Chimbobway will add you </li>
<li>You will recive a case ID from the mod</li>
<li>You Have to provide the mod with screen shots of all the info that he needs</li>
<li>All Trades must has Code that the mod gonna give it to you</li>
</ul>
</div>
</main>
<footer>
<ul>
<div class="navbar-text pull-right">
<li><a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x" style ='color: #CCCCCC'></i></li>
<li><a href="//twitter.com/csgoshuffle"> <i class="fa fa-twitter fa-2x" style ='color: #CCCCCC;'></i></li>
<li><a href="//steamcommunity.com/groups/"> <i class="fa fa-steam fa-2x" style ='color: #CCCCCC;'></i></li>
<li><a href ="//csgoshuffle.com/status">Status</a></li>
<li><a href ="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
<li><a href ="//csgoshuffle.com/contact">Contact</a></li>
<li><a href ="//support.csgoshuffle.com/kb">FAQ</a></li>
<li><a href ="//csgoshuffle.com/tos">Terms of Service</a></li>
<li><a href ="//store.steampowered.com/">Powered by Steam</a></li>
</ul>
</footer>
</body>
s in the footer one for icons and one for links and in the css we made a hoover just for the icons if i want to make another hoover for the links where i gonna type that command , i mean they booth in footer and they booth ul li a , am i right ? thats why i got confused , i dont know whats the diffrecne between the command for the icons and the links i hope you know what iam talking about :) if u didnt i can explain what i mean
– MDub Aug 18 '15 at 16:31` of a `