Font Awesomeを使ってTwitterやFacebookのなどのSNSアイコンやその他様々なアイコンをＣＤＮを使用してWebサイトで使う方法を解説します。
Font Awesomeを使うことで、
Twitterのアイコン
facebookのアイコン
その他 ・・・等々
上記のような色々な種類のアイコンをWeb上で使うことが出来ます。
Font Awesomeを使う前の準備
Font Awesomeを開きます。
左のStart Using Freeをクリックします。
表示されたコードをコピーして<head>タグ内に貼り付けます。
<head><link rel=”〇〇~~~~~~〇”></head>みたいな感じで<head>と</head>の間に貼り付けます
準備はこれで完了です。
Font Awesomeの使い方
Iconsをクリックします。
使用したいアイコンを探します。
検索して探す、もしくは左のサイドバーのカテゴリーから探すことも出来ます。
好みのアイコンを見つけたらクリックして開きます。
今回は例としてTwitterのアイコンを使用します。
Start Using This Iconをクリックするとコードが表示されるのでコピーします。
コピーしたコードを表示させたい部分に貼り付けます。
今回はTwitterの文字の手前に表示させたいのでTwitterの手前の部分に貼り付けます。
<p>ここに貼り付けTwitter</p>みたいな感じ！
これでアイコンが表示されるはずなので確認してみます。
Twitterのアイコンが表示されました。
Font Awesomeのまとめ
以上でFont Awesomeの解説でした。
Font Awesomeを使うことで様々なWebアイコンフォントが使えます。
さらにカスタマイズすることで色や大きさ、SNSのシェアボタンやいいねボタンなども作ることが出来ます。
一見難しそうに思えますが慣れたら以外と簡単に出来るので利用してみてください。
