「Font Awesome」というものをご存知でしょうか。使えるようになっておくと、WEBデザインの場でも役に立ちますので、ぜひ知見として覚えておくとよいかと思います。
「Font Awesome」とは?
「Font Awesome」とは、CSS と Less に基づくフォントとアイコンのツールキットです。
![](https://i0.wp.com/img.fortawesome.com/1ce05b4b/open-graph-general.png?resize=160%2C90&ssl=1)
![](https://i0.wp.com/eguweb.jp/wp-content/uploads/202107170015-00.jpg?resize=1024%2C795)
無料の範囲でも実に多くのアイコンを利用することができます。有料プランになると、さらに使えるアイコンの種類が一気に増えます。
▶有料プランはこちら
手順1:CDNでインポートする
まずは、Font Awesomeを使えるようにCDN(コンテンツ・デリバリー・ネットワーク)でインポートします。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
![](https://i0.wp.com/eguweb.jp/wp-content/uploads/202107170019-00.jpg?resize=774%2C294)
コードをダウンロードして使用することも可能ですが、CDNで利用する場合はダウンロードせずにすぐに利用できるというメリットがあります。
手順2:使いたいフォント(アイコン)を選択する
使いたいフォント(アイコン)を見つけたら、アイコンを選択します。
![](https://i0.wp.com/eguweb.jp/wp-content/uploads/202107170020-00.jpg?resize=816%2C625)
![](https://i0.wp.com/eguweb.jp/wp-content/uploads/202107170021-00.jpg?resize=1024%2C553)
貼り付けに必要なコードが取得できますので、コピーします。
![](https://i0.wp.com/eguweb.jp/wp-content/uploads/202107170021-01.jpg?resize=1024%2C269)
手順3:表示させたい場所にコードを入れる
あとは、表示させたい場所にコードを入れれば、表示されます。
![](https://i0.wp.com/eguweb.jp/wp-content/uploads/202107170024-00.jpg?resize=602%2C197)
表示されました!!
![](https://i0.wp.com/eguweb.jp/wp-content/uploads/202107170024-01.jpg?resize=971%2C442)
WEBフォントなので、CSSを使ってサイズ(フォントサイズ)の調整をすることも可能です。
![](https://i0.wp.com/eguweb.jp/wp-content/uploads/202107170031-00.jpg?resize=318%2C207)
サイズが大きくなりました!
![](https://i0.wp.com/eguweb.jp/wp-content/uploads/202107170031-01.jpg?resize=851%2C460)
いろいろなアイコンを設置してみました!
![](https://i0.wp.com/eguweb.jp/wp-content/uploads/202107170046-00.jpg?resize=998%2C593)
まとめ
「Font Awesome」を使うと、おしゃれで使いやすい様々なフォント(アイコン)を簡単に利用することができます。ちなみにAwesomeとは翻訳すると「驚くばかり」と出てきます。「素晴らしい、カッコイイ」という意味もあるようです。
「驚くばかりフォント」…でしょうか。ネーミングも面白いですね。ぜひご活用されて下さい。
ご参考頂けますと幸いです😃それでは、また。