JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <ul>
    <li><i class="fa fa-address-book" aria-hidden="true"></i></li>
    <li><i class="fa fa-bandcamp" aria-hidden="true"></i></li>
    <li><i class="fa fa-envelope-open" aria-hidden="true"></i></li>
    <li><i class="fa fa-id-card" aria-hidden="true"></i></li>
    <li><i class="fa fa-telegram" aria-hidden="true"></i></li>
    <li><i class="fa fa-snowflake-o" aria-hidden="true"></i></li>
    <li><i class="fa fa-user-circle-o" aria-hidden="true"></i></li>
  </ul>

</div>

CSS

ul {
  padding-top: 20px
}

ul li {
  list-style-type: none;
  width: 16%;
  margin: 0 5px;
  display: inline-block;
  margin-bottom:10px;
  
}

ul li i {
  font-size: 24px !important
}