こんにちは。ペーターパンです。
Webサイトを作成するにあたって、デザイン上に下記のような”小さな矢印”、”三角形”、”虫眼鏡”、”チェックマーク”のアイコンなどをワンポイントで入れて、見栄えを良くしたい事があると思います。
Photoshopでそれぞれの画像（アイコン）を作成したり、無料で使えるアイコン素材サイトから探したりして、その度にそれをサーバー内にアップロードし、その画像を<img>タグなどで読み込んで表示させるのも結構時間が取られますよね。
そんな時はFont Awesomeを使えば、わざわざ画像（アイコン）を作成したり、各素材サイトを探したりせずに、簡単に使いたいアイコンを表示させることが出来ます。
Font Awesomeは商用利用もOKで、有料だと約16,000種類のアイコンが使えるようですが、無料でも約2,000種類もあるので、それでも充分使えるかなと思います。
どのようなアイコンがあるかは「font awesome 一覧」と検索すればアイコン一覧が紹介されているサイトが出てくるので、その中から使用したいアイコンを見つけて、クラス名かHTMLコードをコピーすればOKです。
好きなアイコンを選んで、cssで色を変えたり大きさを変えたり、アニメーションを入れる事も出来るので自由度も高いです。
設置方法は、いくつかあるようですが代表的なものを紹介しておきます。
●cssで読み込む（head内）
<link href=”https://use.fontawesome.com/releases/v6.0.0/css/all.css” rel=”stylesheet”>
●HTMLでの利用例
<i class="fa fa-caret-right"></i>
●cssでの利用例
.icon::before{
font-family: FontAwesome;
content: "\f0da";
}
このような感じで簡単に使用できます。
以上、ペーターパンでした。
