Font Awesome Examples

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container" >
  <header>
    <ul>
      <li>
        <i class="fa fa-home"></i>
        <span class="title" >Home</span>
        <span class="description" >Some Description</span>
      </li>
      <li>
        <i class="fa fa-shopping-basket"></i>
        <span class="title" >Products</span>
        <span class="description" >Some Description</span>
      </li>
      <li>
        <i class="fa fa-at"></i>
        <span class="title" >Contact</span>
        <span class="description" >Some Description</span>
      </li>
    </ul>
  </header>
  <aside>Aside</aside>
  <main>Main</main>
  <footer>Footer</footer>
</div>

CSS

body{
  min-height: 200px;
}

ul{
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li{
  cursor: pointer;
  padding: 10px;
  display: grid;
  grid-template-columns: 35px auto;
  grid-template-rows: 1fr 1fr;
  align-items: center;
}

li:hover{
  opacity: 0.5;
  background-color: red;
}


.fa{
  grid-area: 1 / 1 / 3 / 2;
  text-align: center;
  font-size: 25px;
}

.title{
  font-size: 18px;
}

.description{
  font-size: 12px;
  color: darkgray;
}


li, .fa, .title, .description{
  border: 1px solid black;
  animation-name: borders;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}


@keyframes borders {
    from {border-color: white;}
    to {border-color: transparent;}
}


.container{
  display: grid;
  color: white;
  grid-template-columns: 200px auto;
  grid-template-rows: auto auto 70px;
  grid-template-areas: "header header" "aside main" "footer footer";
}

header{
  background-color: darkred;
  grid-area: header;
}

aside{
  background-color: darkgreen;
  grid-area: aside;
}

main{
  background-color: darkorange;
  grid-area: main;
  height: 200px;
}

footer{
  background-color: darkblue;
  grid-area: footer;
}