[Font Awesome 5]よく使うブランドロゴのカスタマイズ

よく使うブランドロゴのカスタマイズ
1. 背景が四角の場合
2. 背景が丸の場合

よく使うブランドロゴのカスタマイズ

背景が四角の場合

Font Awesome 5を使って、よく使うブランドロゴをカスタマイズしましょう。
重ねた（スタックした）アイコンの背景色を、マウスを乗せた時にブランドカラーに変化させます。リンクボタンとして使いたい時など便利かと思います。

背景色だけを変化させる、というところがポイントです。さっそく見ていきましょう。

Twitter

Instagram

Tripadvisor

facebook

LINE

Alipay

コードはこちらです。
HTML ↓

<span class="fa-stack fa-lg twitter">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-lg instagram">
 <i class="fas fa-square fa-stack-2x"></i>
 <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-lg tripadvisor">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-tripadvisor fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-lg facebook">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-lg line">
  <i class="fab fa-line fa-stack-2x"></i>
</span>

<span class="fa-stack fa-lg alipay">
<i class="fab fa-alipay fa-stack-2x"></i>
</span>

CSS ↓

.fa-square{
  color:gray;
}
.fa-twitter{
  font-size:1.2em;
}
.twitter:hover .fa-square{
  color:#55acee;
}
.fa-instagram{
 font-size:1.4em;
 }
.instagram:hover .fa-square{
color:#d22e90;
}
.fa-tripadvisor{
  font-size:1.2em;
}
.tripadvisor:hover .fa-square{
  color: #00af87;
}
.fa-facebook-f{
  font-size:1.2em;
}
.facebook:hover .fa-square{
  color:#3b5998;
}
.line{
  color:gray;
}
.line:hover {
  color:#00B900;
}
.alipay{
  color:gray;
}
.alipay:hover{
  color:#1677ff;
}

詳細を見ていきましょう。Twitterを例にします。四角のアイコンとTwitterのアイコンを<span>タグで囲みます。CSSで編集しやすいように、親要素である<span>タグに”twitter”と名前を付けています。Twitterロゴは白く表示したいので、”fa-inverse”で反転させてあります。↓

<span class="fa-stack fa-lg twitter">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

CSSは以下の通りです。まず、四角のアイコンの色をグレーにしあります。twitterロゴのフォントサイズを1.2倍にしてあります。↓

.fa-square{
  color:gray;
}
.fa-twitter{
  font-size:1.2em;
}
.twitter:hover .fa-square{
  color:#55acee;
}

最大のポイントはこちらです。↓
.twitter:hover .fa-square{
color:#55acee;
}
.twitter:hoverの後に半角スペースを空けて.fa-squareを記述しなければいけません。
これに気が付かなくてハマりました。ググっても情報が少なかったので、試行錯誤してやっとできました。

.twitter:hover{
color:55acee;
}
だけの指定だと、アイコンの色が変化してしまいます。あくまで、背景の色を変えたいので。

背景が丸の場合

背景が丸バージョンを見てみましょう。LINEとAlopayは割愛します。↓

Twitter

Instagram

Tripadvisor

facebook

HTMLコードです。四角のアイコン（fa-square）が丸のアイコン(fa-circle)に代わっただけです。↓

<span class="fa-stack fa-lg twitter">
 <i class="fas fa-circle fa-stack-2x"></i>
 <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-lg instagram">
 <i class="fas fa-circle fa-stack-2x"></i>
 <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-lg tripadvisor">
 <i class="fas fa-circle fa-stack-2x"></i>
 <i class="fab fa-tripadvisor fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-lg facebook">
 <i class="fas fa-circle fa-stack-2x"></i>
 <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>

CSSコードです。同じく四角が丸に代わっただけです。↓

.fa-circle{
  color:gray;
}
.twitter:hover .fa-circle{
  color:#55acee;
}
.fa-twitter{
  font-size:1.2em;
}
.fa-instagram{
 font-size:1.4em;
 }
.instagram:hover .fa-circle{
color:#d22e90;
}
.fa-tripadvisor{
  font-size:1.2em;
}
.tripadvisor:hover .fa-circle{
  color: #00af87;
}
.fa-facebook-f{
  font-size:1.2em;
}
.facebook:hover .fa-circle{
  color:#3b5998;
}

SNS系のブランドアイコンはリンクボタンなどで割と使うので、こういったカスタマイズができるとちょっと楽しいですよね。参考になれば幸いです。Font Awesome 5の基本的な使い方は別記事にまとめてあります。ご参照ください。↓