アイコンWebフォント Font Awesome 5 の簡単な使い方(画像)

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
公式サイトにはアイコン一覧も
公式サイトにはアイコン一覧も
クリックすると拡大表示例が出る
クリックすると拡大表示例が出る
CSSファイルを1つ読み込むだけで準備は完了
CSSファイルを1つ読み込むだけで準備は完了
ヘッダ部分にある「Download」をクリックして、一式(ZIPファイル)をダウンロード
ヘッダ部分にある「Download」をクリックして、一式(ZIPファイル)をダウンロード
公式サイト内にあるアイコン一覧
公式サイト内にあるアイコン一覧
アイコンの拡大と記述例
アイコンの拡大と記述例
アイコンの回転・反転も簡単
アイコンの回転・反転も簡単
2つのアイコンを重ねて表示もできる
2つのアイコンを重ねて表示もできる
「Font Awesome」の使用例
「Font Awesome」の使用例
Font AwesomeをCDN経由で読み込むためのURL
Font AwesomeをCDN経由で読み込むためのURL
公式サイトにあるアイコン一覧ページ (Ver 4.7.0)
公式サイトにあるアイコン一覧ページ (Ver 4.7.0)
アイコンの拡大ページ:記述例のHTMLソースなども記載されている
アイコンの拡大ページ:記述例のHTMLソースなども記載されている
Font Awesome 5はCDN経由で読み込めるため、指定の1行を自サイトのHTMLに転記するだけでセットアップは完了する
Font Awesome 5はCDN経由で読み込めるため、指定の1行を自サイトのHTMLに転記するだけでセットアップは完了する
Font Awesome 5.3.1では、前のバージョンから386個のアイコンが増えた
Font Awesome 5.3.1では、前のバージョンから386個のアイコンが増えた
ゴミ箱アイコン(左)はSolidとRegularが無料で使えてLightだけが有料だが、救急車アイコン(右)はRegularとLightが有料
ゴミ箱アイコン(左)はSolidとRegularが無料で使えてLightだけが有料だが、救急車アイコン(右)はRegularとLightが有料
Font Awesome 5で提供されているアイコンは、SVG形式のファイルとしてダウンロードすることもできる
Font Awesome 5で提供されているアイコンは、SVG形式のファイルとしてダウンロードすることもできる
無料のFont Awesome 5 Free版でも1,300種類を超えるアイコンが使える
無料のFont Awesome 5 Free版でも1,300種類を超えるアイコンが使える
HTMLソース部分をクリックすると、そのアイコンを表示するためのソースをコピーできる
HTMLソース部分をクリックすると、そのアイコンを表示するためのソースをコピーできる
Font Awesome 5のゴミ箱(Trash)アイコンページ:左上に使い方が表示され、右端では書体を選択できる
Font Awesome 5のゴミ箱(Trash)アイコンページ:左上に使い方が表示され、右端では書体を選択できる
リストアップされるアイコンは、キーワードを使って絞り込むこともできる
リストアップされるアイコンは、キーワードを使って絞り込むこともできる
Font Awesome 5のアイコンリストページでは、左端のメニューから表示対象を絞り込むことで望みのアイコンを探せる
Font Awesome 5のアイコンリストページでは、左端のメニューから表示対象を絞り込むことで望みのアイコンを探せる
Font Awesome 5 サンプルページの表示例
Font Awesome 5 サンプルページの表示例
この写真の記事を読む
公式サイトにはアイコン一覧も
クリックすると拡大表示例が出る
CSSファイルを1つ読み込むだけで準備は完了
ヘッダ部分にある「Download」をクリックして、一式(ZIPファイル)をダウンロード
公式サイト内にあるアイコン一覧
アイコンの拡大と記述例
アイコンの回転・反転も簡単
2つのアイコンを重ねて表示もできる
「Font Awesome」の使用例
Font AwesomeをCDN経由で読み込むためのURL
公式サイトにあるアイコン一覧ページ (Ver 4.7.0)
アイコンの拡大ページ:記述例のHTMLソースなども記載されている
Font Awesome 5はCDN経由で読み込めるため、指定の1行を自サイトのHTMLに転記するだけでセットアップは完了する
Font Awesome 5.3.1では、前のバージョンから386個のアイコンが増えた
ゴミ箱アイコン(左)はSolidとRegularが無料で使えてLightだけが有料だが、救急車アイコン(右)はRegularとLightが有料
Font Awesome 5で提供されているアイコンは、SVG形式のファイルとしてダウンロードすることもできる
無料のFont Awesome 5 Free版でも1,300種類を超えるアイコンが使える
HTMLソース部分をクリックすると、そのアイコンを表示するためのソースをコピーできる
Font Awesome 5のゴミ箱(Trash)アイコンページ:左上に使い方が表示され、右端では書体を選択できる
リストアップされるアイコンは、キーワードを使って絞り込むこともできる
Font Awesome 5のアイコンリストページでは、左端のメニューから表示対象を絞り込むことで望みのアイコンを探せる
Font Awesome 5 サンプルページの表示例
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます