こんにちはrey( @reydesign8376) です
便利なwebアイコンを提供している「Font Awesome」の使い方をご紹介していきます〜
では早速〜
目次
Font Awesomeとは?
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://img.fortawesome.com/1ce05b4b/open-graph-general.png)
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
共有されるコードを入れるだけでアイコンが表示されるようになるサービスです。
全編英語字幕無しなので日本語で簡単に説明してまいります!
今回は簡単なkits Codeでの取得方法をやっていきます
使い方
STEP
アカウント登録
まずはアカウント登録
無料で登録できます。プランも無料、プロ有料と選べます
無料でも2000個ほど使えるので十分です
もちろんSNSアイコンも使用できます
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-16-22.34.59.png)
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/kit.png)
STEP
kits Codeを取得
コードを取得できたら<head></head>の中に<script>コードを入れます
準備完了!これでアイコンタグを追加すれば反映されます
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-17-20.41.png)
STEP
使用したいアイコンのコードを取得
Icons>Free で無料アイコンを検索
使いたいアイコンをクリック
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-17-20.18.10.png)
<i>タグのコード上をクリックしコピーできます
それをシートにペーストし完了になります
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-17-20.19.21.png)
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-17-21.09.59.png)
![](https://maisondelamer-design.com/blog/wp-content/uploads/2022/08/スクリーンショット-2022-08-17-20.22.04-1.png)
アニメーションアイコンもあるよ
こんなアニメーションのアイコンもコードをコピペするだけで簡単に実装できます
ぜひweb制作に活用させてみてください〜!
ではでは
コメント