ウェブサイトのデザインを華やかにするアクセントとしてアイコンを使いたいけど、ピクセル整数値での扱いが必要なアイコンは作成が面倒。。

そんな方にとって何とも便利で嬉しいウェブアイコン Font Awesome のご紹介です。

Font Awesome は、ウェブサイト上で手軽にアイコンを利用できるサービスです。

アイコンは画像ではなく、あくまでフォントの一種として使用できるため、サイズや色の変更がスタイルシートから容易に行える上、拡大縮小を行っても画像が荒れないため、手軽に利用することができます。

ウェブデザインで使用する一般的なアイコンはほとんど網羅されており、日々新しいものがアップされるのでとてもおすすめです。

アイコンの一覧ページから利用できる内容を確認することができます。

 

手軽にFont Awesome を使う方法

Font Awesome の読み込み

Font Awesome をサイト上で利用する方法はいくつかありますが、最も導入が簡単な方法はCDN を利用して本家サイトから直接読み込みを行うことです。

まずはじめに、<head>〜</head>間に、下記のFont Awesome のCSSを読み込みます。

アイコンを表示させる

上記コードの記述でFont Awesome を読み込む環境は整いましたので、後はお好きな場所にアイコンを表示させるだけです。

まずはアイコンの一覧ページからお好みのアイコンを見つけ、気に入ったものがあればアイコンをクリックし詳細画面に入ります。

 

後は上図のように<i class=”***”>〜</i>までをコピーして、HTMLソースに記述すれば望みのアイコンを手軽に表示させることができます。

Font Awesome をCSS で装飾する

Font Awesome はあくまでフォントとして使用しているため、CSSでの改変が簡単です。
以下のように通常の文字のように取り扱うことが可能です。

特にナビゲーションの装飾などに役立つアイコンですが、Font Awesome なら手軽に微調整しながら楽しむことができますね。

今回は、Font Awesome をHTMLで使用する基本的な方法についての記事でしたが、CSSとして利用することも可能です。

詳細は、Font AwesomeのアイコンをCSSで利用する方法とその応用の記事も併せてご覧いただければ幸いです。

関連する記事

PAGE TOP

copyrights PRINT TABLE