今回は、前回ご紹介したFont Awesomeのアイコンの例をいくつかご紹介します!
Webサイトでよく目にするようなアイコンを集めてみました。
早速見ていきましょう!
Font Awesomeのアイコン
- 矢印のアイコン
- メールのアイコン
- 虫眼鏡のアイコン
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だと思ったように動かないので注意しましょう。
まとめ
- 矢印のアイコン
- メールのアイコン
- 虫眼鏡のアイコン
の3つをご紹介しました。
適切にアイコンを使うと、限られたスペースで分かりやすく伝えることが可能になります。