今回は、前回ご紹介したFont Awesomeのアイコンの例をいくつかご紹介します！

Webサイトでよく目にするようなアイコンを集めてみました。

早速見ていきましょう！

Font Awesomeのアイコン

1. 矢印のアイコン
2. メールのアイコン
3. 虫眼鏡のアイコン

1. 矢印のアイコン

これを単体で用いるというより、例えば以下のように、ホバーアニメーションと組み合わせて使うことが多いかもしれません。

Focus Here!

矢印の向きを変えることで、下層ページに行くことや、前のページに戻ること、ページ内リンクで下にスクロールすることなどを分かりやすくすることができます。

2. メールのアイコン

お問い合わせフォームのデザインのワンポイントとして使われたり、ヘッダーのお問い合わせフォームへのリンクをスマートフォン版で表したりするのに使われます。

3. 虫眼鏡のアイコン

サイト内検索を実装する場合、以下のように分かりやすくするために用いることがあります。

※サンプルのため、入力を受け付けないように設定しています。

入力項目の両端を丸くしているようなものも度々見ますね！

どうやって実装しているの？

今回は、「1. 矢印のアイコン」を使ったリンクボタンを紹介します。

/* HTML */
<a class="link-box">Focus Here!</a>

/* CSS */
.link-box{
  display: block;
  position: relative;
  width: 80%;
  max-width: 250px;
  padding: 1em 0;
  border: 2px solid white;
  margin: 20px 0;
  background-color: #2E2B2B;
  color: white;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: .3s;
}

.link-box::after{
  position: absolute;
  top: 16px;
  right: 16px;
  color: white;
  font-family: "Font Awesome 5 Free";
  font-size: 16px;
  font-weight: 900;
  content: '\f054';
}

.link-box:hover{
  border: 2px solid #2E2B2B;
  background-color: white;
  color: #2E2B2B;
}

.link-box:hover::after{
  color: #2E2B2B;
}

::afterでFont Awesomeの右矢印の設定をしています。

hover時は、:hover::afterの順で設定しています。

::after:hoverだと思ったように動かないので注意しましょう。

まとめ

1. 矢印のアイコン
2. メールのアイコン
3. 虫眼鏡のアイコン

の3つをご紹介しました。

適切にアイコンを使うと、限られたスペースで分かりやすく伝えることが可能になります。