<head>
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>

  <h2>HTMLで表示</h2>
 <div class="type">
  <p>通常表示</p>
  <i class="fas fa-user-circle"></i>
</div>

 <div class="type">
  <p>サイズを変える</p>
  <i class="fas fa-user-circle fa-4x"></i>
 </div>

 <div class="type">
  <p>横幅を揃える</p>
  <div class="block"> 
    <p class="small">揃えてない↓</p>
    <i class="fas fa-user-circle"></i>
    <i class="fas fa-female"></i>
    <i class="fas fa-hotel"></i>
    <p class="small">揃えた↓</p>
    <i class="fas fa-user-circle fa-fw"></i>
    <i class="fas fa-female fa-fw"></i>
    <i class="fas fa-hotel fa-fw"></i>
  </div>
 </div>

  <div class="type">
    <p>リストで使う</p>
    <ul class="fa-ul">
      <li><span class="fa-li" ><i class="fas fa-check-square"></i></span>リストだよ</li>
      <li><span class="fa-li"><i class="fas fa-check-square"></i></span>リストだよ</li>
      <li><span class="fa-li"><i class="fas fa-check-square"></i></span>リストだよ</li>
    </ul>
  </div>

<div class="type">
  <p>その他装飾</p>
  <p class="small">回す↓</p>
    <i class="fas fa-spinner fa-spin"></i>
  <p class="small">反転↓</p>
  <i class="fas fa-quote-left"></i>
  <i class="fas fa-quote-left fa-flip-vertical"></i>
  <i class="fas fa-quote-left fa-flip-horizontal"></i>
</div>
.type{
  background:#eee;
  padding:10px; 5px;
  margin:20px 0;
}
.block i{
  display:block;
  padding:5px;
}
p{
  font-weight:600;
}
p.small{
  font-size:0.7em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.