そもそもFont Awesomeって？
今回のお題は、
「Font Awesome」です！
聞いたことが無いという方も多いかもしれません。
Font Awesomeとは、Webサイトで使えるアイコンを表示できるようにするサービスです。
アイコンのために画像を作成したり、探したりする手間を大幅に削減してくれます。
では、そのアイコンはどのようなものなのでしょうか？実際に見てみましょう。
前回、8.見出しのデザイン例 その２としてサブキャッチコピー付き見出しを少し変更して、チェックマークをつけてみました。
このチェックマークがFont Awesomeで使えるアイコンの一例です。
チェックマークがあると、少し完成度が上がる気がしませんか？
ちなみに、Font Awesomeは無料プランと有料プランがあり、上のチェックマークは無料プランでも表示されます。
1年ごとに99$払うことでより多くのアイコンを使える有料プランにできますが、無料プランでも十分な量の魅力的なアイコンを使えます。
どんな時に使うの？
レスポンシブデザインでは度々使うことがあります。
特にスマートフォン版では、画面幅が狭くテキストをあまり入れられません。
そんなときに、パッと見てすぐに分かるFont Awesomeのアイコンをテキスト代わりに使います。
他にも、先ほどのチェックマークのように、デザインのアクセントとして使うことも度々あります。
どうやって実装しているの？
/* HTML */
<head>
<link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet">
</head>
<div class="iconbox">
<p>・チェックリストの項目1</p>
<p>・チェックリストの項目2</p>
<p>・チェックリストの項目3</p>
</div>
/* CSS */
.iconbox{
display: inline-block;
position: relative;
padding: 20px;
border: 2px solid #2E2B2B;
margin: 50px 0 30px;
background-color: white;
color: #2E2B2B;
font-size: 18px;
line-height: 1.5;
}
.iconbox::before{
position: absolute;
top: -24px;
left: -2px;
height: 24px;
padding: 0 15px 0 30px;
content: 'Check';
background-color: #2E2B2B;
color: white;
font-size: 15px;
}
.iconbox::after{
position: absolute;
top: -24px;
left: 7.5px;
content: '\f00c';
color: white;
font-family: "Font Awesome 5 Free";
font-size: 15px;
font-weight: 900;
}::afterでチェックマークを設定しています。
contentは”で囲むのを忘れないようにする、font-familyに”Font Awesome 5 Free”と書くこと、対応するfont-weightを指定するなど注意する点が多いです。
(設定を間違えると、□で表示されます。)
なお今回のように、リストの上にチェックマークを入れたい場合は、divの代わりにulを、pの代わりにliを使うとより良いと思います。
まとめ
- Font Awesomeは、Webサイトで使えるアイコンを表示できるようにするサービスのこと。
- 省スペースで表現する必要があるときに使われたり、デザインのアクセントとして使われたりする。
次回は、今回ご紹介したFont Awesomeのアイコンの例をいくつかご紹介します！