超簡単!!YouTubeのタグ取得(YouTubeのAPIからタグを取得します)

Font Awsomeとは?【最新版】Font Awsome使い方と、Webサイトにアイコンを入れるならFont Awsomeがオススメな理由

Font Awsomeとは?【最新版】Font Awsome使い方と、Webサイトにアイコンを入れるならFont Awsomeがオススメな理由

ウェブサイトに

アイコンを入れる際、皆さんはどんな方法をとっていますか?

私は、Font Awsomeをよく使います。

今回は、Font Awsomeがオススメな理由について書きます。

Font Awsomeのサイトはこちら

Font Awsomeとは?

アイコンをフォントとしてデータ化したアイコンフォント。

文字としてアイコンを入れ込めるのが特徴でとても便利です。

こちらがFont Awsomeで入れたアイコンの例です。


絵文字みたいですね。こういうアイコンがたくさんあります。

詳しくはFont Awsomeのアイコンのページをご覧ください。

Font Awsome 簡単に使い方

簡単に使い方を解説します。

①トップページの「Start for Free」をクリック

Font Awsome トップページ

2、メールアドレスを入力 「Send Kit Code」を押す

(昔は会員登録しなくても使えましたが今は、ちょっと変わったみたいです)

メールアドレスを入力

3、メールが届くので「Click to Confirm Your Email Address + Set Things Up」というボタンをおす。
リンクで移動した先で名前やpasswordを設定め

4、入力が終わると、こんなコードがあるページに飛ぶので「Copy Kit Code」を押して

コードをコピーして、コピーしたコードを使いたいwebページの<head></head>内に貼り付けます。

Font Awsomeのコード

5、アイコンページより、使いたいアイコンを選ぶ

6、選択したアイコンのページの赤枠で囲った箇所をクリックし

アイコンのhtmlをコピーする。コピーしたものをhtmlファイルの入れたい箇所に貼り付ける

選んだアイコンを貼り付ける

すると、

このように入力できます。
 

Font Awsomeがオススメな理由

Font Awsomeは文字なのでcssで色が変わる

Font Awsomeは文字としてサイトに入れ込まれます。

font-sizeや、colorなどの文字に対するプロパティーで

色を変えたり、サイズを変えたりできます。

アイコンを画像で入れ込むと、hoverの際色が変わる作りにしたい場合

通常のアイコン画像と、色が変わった際のアイコン画像2枚を作って入れ込まなければなりません。

それがcssで解決できるので、簡単です。

フォルダにimgを入れなくていい

これも、Font Awsomeが文字だから。

サイトを作ると、imgフォルダーにimgがいっぱいになってしまいます。

それを少しでも削減できます。

Font Awsomeは数が多い

有料のProで7000以上、

無料でも1500以上のアイコンが使えます。

あのアイコンないな〜と困ったことはあまりありません。

Font Awsomeは企業アイコンがある

YouTubeはこちら。Twitterはこちら。

などのリンク作成の際、わざわざ、企業サイトからアイコンをダウンロードして

入れ込まなくても利用できます。

絵文字と違って環境依存が少ない

最近、クライアントにアイコンを絵文字で入れ込んでくれ!

と言われ、対応してみたのですが、見るブラウザにより違ったものを表示したりと

環境依存がすごかったので結局使わなかったです。

Font Awsomeは環境依存しなかったので結局Font Awsomeを利用しました。

 

いかがだったでしょうか?

Font Awsome使ったことない方、試しに使ってみてはいかがだろうか?

Webサイト運営法!!カテゴリの最新記事