CODEWITHSUNDEEP
htmlcss
Joby Mathews
Joby Mathews

Reputation: 259

How to align font-awesome icons to center

I want to make the icons to be arranged in a row with center align.

This is the fiddle

.ft-foot {
    float: left;
    width: 100%;
    padding: 3px 10px;
    background: #000;
}
.inclusion {
  color: white;
  padding: 5px 0 10px 0;
  display: block;
  letter-spacing: 1px;
  text-align: center;
}

.inclusion span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
}

.inclusion i {
  font-size: 30px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ft-foot">
  <ul>
    <li><a class="inclusion"><i class="fa fa-male" aria-hidden="true"></i><span>Guide</span></a>
    </li>
    <li><a class="inclusion"><i class="fa fa-car" aria-hidden="true"></i><span>Site seeing</span></a>
    </li>
    <li><a class="inclusion"><i class="fa fa-building-o" aria-hidden="true"></i><span>Hotels</span></a>
    </li>
    <li><a class="inclusion"><i class="fa fa-plane" aria-hidden="true"></i><span>Transportation</span></a>
    </li>
    <li><a class="inclusion"><i class="fa fa-cutlery" aria-hidden="true"></i><span>Food</span></a>
    </li>
  </ul>
</div>

Upvotes: 1

Views: 1753

Answers (4)

user8836893
user8836893

Reputation: 66

.ft-foot {
    float: left;
    width: 100%;
    padding: 3px 10px;
    background: #000;
}
.inclusion {
  color: white;
  display: block;
  letter-spacing: 1px;
  text-align: center;
}

.inclusion span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
}

.inclusion i {
  font-size: 30px;
}
.ft-foot ul{
    padding: 0;
    width: 100%;
    display: inline-block;
    list-style: none;
}
.ft-foot ul li {
    width: 20%;
    float: left;
}

Upvotes: 0

Bharath Kumar
Bharath Kumar

Reputation: 558

Add text-align:center in ul and display: inline-block in li.

.ft-foot {
    float: left;
    width: 100%;
    padding: 3px 10px;
    background: #000;
}
.inclusion {
  color: white;
  padding: 5px 0 10px 0;
  display: block;
  letter-spacing: 1px;
  text-align: center;
}

.inclusion span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
}

.inclusion i {
  font-size: 30px;
}
li {
  display: inline-block;
}
ul {
  text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ft-foot">
  <ul>
    <li><a class="inclusion"><i class="fa fa-male" aria-hidden="true"></i><span>Guide</span></a></li>
    <li><a class="inclusion"><i class="fa fa-car" aria-hidden="true"></i><span>Site seeing</span></a></li>
    <li><a class="inclusion"><i class="fa fa-building-o" aria-hidden="true"></i><span>Hotels</span></a></li>
    <li><a class="inclusion"><i class="fa fa-plane" aria-hidden="true"></i><span>Transportation</span></a></li>
    <li><a class="inclusion"><i class="fa fa-cutlery" aria-hidden="true"></i><span>Food</span></a></li>
  </ul>
</div>

Upvotes: 0

shemaya
shemaya

Reputation: 196

Add display: inline-block to the li elemets and set the ul parent to text-align: center. Fiddle: http://jsfiddle.net/wemsm7me/

Upvotes: 0

Manish Patel
Manish Patel

Reputation: 3674

Add display: inline-block; in li

.ft-foot {
    float: left;
    width: 100%;
    padding: 3px 10px;
    background: #000;
    text-align:center;
}
.ft-foot ul li {
  display: inline-block;
  margin:0 10px;
}
.inclusion {
  color: white;
  padding: 5px 0 10px 0;
  display: block;
  letter-spacing: 1px;
  text-align: center;
}
.inclusion span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ft-foot">
  <ul>
    <li><a class="inclusion"><i class="fa fa-male" aria-hidden="true"></i><span>Guide</span></a></li>
    <li><a class="inclusion"><i class="fa fa-car" aria-hidden="true"></i><span>Site seeing</span></a></li>
    <li><a class="inclusion"><i class="fa fa-building-o" aria-hidden="true"></i><span>Hotels</span></a></li>
    <li><a class="inclusion"><i class="fa fa-plane" aria-hidden="true"></i><span>Transportation</span></a></li>
    <li><a class="inclusion"><i class="fa fa-cutlery" aria-hidden="true"></i><span>Food</span></a></li>
  </ul>
</div>

Upvotes: 5

Related Questions