【Font Awesome】のスタイル設定

<div>
<i class="fas fa-camera fa-1x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
</div>

<div>
<i class="fas fa-camera" style="font-size: 0.8em;"></i>

<i class="fas fa-camera" style="font-size: 2em;"></i>

<i class="fas fa-camera" style="font-size: 48px;"></i>
</div>

<i class="fas fa-camera my-big"></i>
<i class="fas fa-camera my-small"></i>

.my-big{font-size: 48px;}
.my-small{font-size: 14px;}

<!-- 親要素にサイズを小さくする指定 -->
<span style="font-size: 0.5rem;">
   <i class="fas fa-camera fa-5x"></i>
</span>

<!-- 親要素にサイズ指定なし -->
<span>
   <i class="fas fa-camera fa-5x"></i>
</span>

<!-- 親要素にサイズを大きくする指定 -->
<span style="font-size: 2rem;">
   <i class="fas fa-camera fa-5x"></i>
</span>

<div>
<i class="fas fa-skating fa-fw"></i><br>
<i class="fas fa-skiing fa-fw"></i><br>
<i class="fas fa-skiing-nordic fa-fw"></i><br>
<i class="fas fa-snowboarding fa-fw"></i><br>
<i class="fas fa-snowplow fa-fw"></i>
</div>

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-seedling"></i></span>春の花</li>
  <li><span class="fa-li"><i class="fas fa-seedling"></i></span>夏の花</li>
  <li><span class="fa-li"><i class="fas fa-seedling"></i></span>秋の花</li>
  <li><span class="fa-li"><i class="fas fa-seedling"></i></span>冬の花</li>
</ul>

かなりガチャガチャしちゃいますね。

垂直方向が揃ったリストが出来上がります。

元のアイコン → 　このアイコンの角度を変えてみましょう。

<i class="fas fa-map-pin fa-3x fa-ratate-20"></i>
<i class="fas fa-map-pin fa-3x fa-ratate-330"></i>

.fa-ratate-20{transform: rotate(20deg); /*角度20度*/}
.fa-ratate-330{transform: rotate(330deg);/*角度330度*/}

色の指定を追加することもできます。

<div>
  <p>
     <i class="fas fa-map-pin fa-3x fa-ratate-20 color-pink"></i>　
     <i class="fas fa-map-pin fa-3x fa-ratate-20 color-palegreen"></i>　
     <i class="fas fa-map-pin fa-3x fa-ratate-20 color-skyblue"></i>　
  </p>

  <p>
     <i class="fas fa-map-pin fa-3x fa-ratate-330 color-skyblue"></i>　
     <i class="fas fa-map-pin fa-3x fa-ratate-330 color-palegreen"></i>　
     <i class="fas fa-map-pin fa-3x fa-ratate-330 color-pink"></i>　
  </p>
</div>

.color-pink{color: pink;}
.color-palegreen{color: palegreen;}
.color-skyblue{color: skyblue;}

用意されたクラスfa-borderを使う場合

<div>
   <i class="fas fa-arrow-left fa-border" title="戻る"></i>
   <i class="fas fa-arrow-right fa-border" title="戻る"></i>
</div>

.fa-border {
    border: 0.08em solid #eee;
    border-radius: 0.1em;
    padding: 0.2em 0.25em 0.15em;
}

オリジナルCSSを追加する

<span class="fa-sample-box1">
   <i class="fas fa-arrow-left fa-fw" title="戻る"></i>
</span>

<span class="fa-sample-box1">
   <i class="fas fa-arrow-right fa-fw" title="進む"></i>
</span>

<span class="fa-sample-box1">
   <i class="fas fa-angle-double-right fa-fw"></i>
</span>

<span class="fa-sample-box1">
   <i class="fas fa-angle-right fa-fw"></i>
</span>

.fa-sample-box1{
   border: 1px solid silver; /* 枠線 */
   padding: 0.5em; /* 余白 */
}

fa-fwを入れないと、こうなる →　

オリジナルCSSを追加する　2

枠線にアレンジを加えてみましょう。

.fa-sample-box2{
   border: 2px solid silver; /* 枠線 */
   border-radius: 8px; /*枠線の角丸設定*/
   padding: 0.5em; /* 余白 */
}

背景色と文字色を指定しています。

<span class="fa-sample-box3">
   <i class="fas fa-info fa-fw"></i>
</span>

<span class="fa-sample-box3">
   <i class="fas fa-question fa-fw"></i>
</span>

<span class="fa-sample-box4">
   <i class="far fa-smile fa-fw"></i>
</span>

<span class="fa-sample-box4">
   <i class="fas fa-key fa-fw"></i>
</span>

.fa-sample-box3{
   background-color: #1e50a2;/* 背景色（青色） */
   color: #fff; /*文字色*/
   border-radius: 0.25em;
   padding: 0.5em;
}
.fa-sample-box4{
   background-color: #ffc107; /* 背景色（黄色）*/
   color: #fff;
   border-radius: 0.25em;
   padding: 0.5em;
}

背景を円形にする

.fa-sample-box5{
   background-color: #ffc107;
   color: #fff;
   font-size: 30px;
   border-radius: 50%;
   text-align: center;
   padding: 3px 0;
   width: 56px;
   height: 56px;
}