Font Awesomeを使ってTwitterやFacebookなどのWebアイコンフォントの使おう

Font Awesomeの使い方 プログラミング

Font Awesomeを使ってTwitterやFacebookのなどのSNSアイコンやその他様々なアイコンをCDNを使用してWebサイトで使う方法を解説します。

Font Awesomeを使うことで、

Twitterのアイコン 

facebookのアイコン 

その他  ・・・等々

上記のような色々な種類のアイコンをWeb上で使うことが出来ます。

Font Awesomeを使う前の準備

Font Awesomeを開きます

左のStart Using Freeをクリックします。

Font Awesome_top

表示されたコードをコピーして<head>タグ内に貼り付けます。

<head><link rel=”〇〇~~~~~~〇”></head>みたいな感じで<head>と</head>の間に貼り付けます

準備はこれで完了です。

Font Awesomeの使い方

Iconsをクリックします。

使用したいアイコンを探します。

Font Awesome_Icon1

検索して探す、もしくは左のサイドバーのカテゴリーから探すことも出来ます。

好みのアイコンを見つけたらクリックして開きます。

今回は例としてTwitterのアイコンを使用します。

Font Awesome_Icon3

Start Using This Iconをクリックするとコードが表示されるのでコピーします。

Font Awesome_Icon4

コピーしたコードを表示させたい部分に貼り付けます。

今回はTwitterの文字の手前に表示させたいのでTwitterの手前の部分に貼り付けます。

おーむ
おーむ

<p>ここに貼り付けTwitter</p>みたいな感じ!

これでアイコンが表示されるはずなので確認してみます。

Font Awesomeの使い方とTwitterアイコン

Twitterのアイコンが表示されました。

Font Awesomeのまとめ

以上でFont Awesomeの解説でした。

Font Awesomeを使うことで様々なWebアイコンフォントが使えます。

さらにカスタマイズすることで色や大きさ、SNSのシェアボタンやいいねボタンなども作ることが出来ます。

一見難しそうに思えますが慣れたら以外と簡単に出来るので利用してみてください。