Webアイコン Font Awesome 使い方

こんにちはrey( @reydesign8376) です

便利なwebアイコンを提供している「Font Awesome」の使い方をご紹介していきます〜
では早速〜

目次

Font Awesomeとは?

あわせて読みたい
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アイコンも使用できます

STEP
kits Codeを取得

コードを取得できたら<head></head>の中に<script>コードを入れます
準備完了!これでアイコンタグを追加すれば反映されます

STEP
使用したいアイコンのコードを取得

Icons>Free で無料アイコンを検索
使いたいアイコンをクリック

<i>タグのコード上をクリックしコピーできます
それをシートにペーストし完了になります

アニメーションアイコンもあるよ

こんなアニメーションのアイコンもコードをコピペするだけで簡単に実装できます

ぜひweb制作に活用させてみてください〜!
ではでは

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次