この写真の記事へ

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

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

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

...続きを読む

HTMLソース部分をクリックすると、そのアイコンを表示するためのソースをコピーできる

公式サイトにはアイコン一覧も
クリックすると拡大表示例が出る
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 サンプルページの表示例

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる

カテゴリー一覧

All Aboutサービス・メディア

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