HTMLとCSSでさまざまなアイコンを表示する

フリーのアイコン・ライブラリ「Font Awesome」を利用し、HTMLとCSSだけでTwitterボタンやFacebookのシェアボタンを設置する方法を紹介する。今回、JavaScript と jQuery を使用しているのは、タイトルやタイムスタンプを表示するためだけである。

プログラムを実行する

1. サンプル・プログラムの実行例
2. サンプル・プログラムのダウンロード
3. FontAwesomeの使い方
4. アイコンの検索
5. 参考サイト

ダウンロード

圧縮ファイルの内容

font-awesome.html

サンプル・プログラム本体

0026: <link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet">
0027: 

0104: <button id="tweet" name="tweet" class="tweet_button"><i class="fab fa-twitter" style="padding-right:10px;"></i>ツイート</button>
0105: <button id="facebook" name="facebook" class="facebook_button"><i class="fab fa-facebook" style="padding-right:10px;"></i>シェア</button>
0106: <button id="print" name="print" class="print_button"><i class="fas fa-print" style="padding-right:10px;"></i>印刷</button>
0107: 

Font Awesome は、公式サイトからダウンロードして使う方法と、CDN（Content Delivery Network）で利用する方法の2種類がある。ここでは、CDNで使う方法を紹介する。
アイコンの指定方法は、

1. CSS
2. Webフォント
3. SVG

の3種類が選べるが、ここではCSSで使う方法を紹介する。

まず、上のコードのように <link> タグによりCDNから Font Awesome スタイルシートにリンクする。
次に <i> タグのclassを指定することで、目的のアイコンを表示する。
classに指定するのは、スタイルを指定するプレフィックスと、fa-で始まるアイコンの名前である。

プレフィックス

スタイル	プレフィックス	例
Solid	fas	<i class="fas fa-printer">
Regular	far	<i class="far fa-printer">
Light	fal	<i class="fal fa-printer">
Brands	fb	<i class="fab fa-twitter">

アイコンの名前は https://fontawesome.com/v5.9/icons から検索する。グレーアウトしているアイコンは、有償版でないと使えない。

たとえば "twitter" で検索すると、いくつかのアイコンがヒットする。

アイコンをクリックすると、上図の画面に遷移する。赤い矩形で示した部分がアイコンの名前になる。

CSSでアイコンを指定した場合、親オブジェクトのcolor指定がアイコン・カラーに、font-size指定がアイコン・サイズに反映される。

• Font Awesome
• 【Font Awesome】初心者でもすぐ使える！簡単Webアイコン入門：CodeCampus