サンプル・プログラムの実行例
サンプル・プログラムのダウンロード
| font-awesome.html | サンプル・プログラム本体 |
FontAwesomeの使い方
26: <link href="https://use.fontawesome.com/releases/v6.5.2/css/all.css" rel="stylesheet">
27:
112: <button id="tweet" name="tweet" class="tweet_button"><i class="fab fa-twitter" style="padding-right:10px;"></i>ツイート</button>
113: <button id="tweet" name="tweet" class="x_tweet_button"><i class="fa-brands fa-x-twitter" style="padding-right:10px;"></i>ポスト</button>
114: <button id="facebook" name="facebook" class="facebook_button"><i class="fab fa-facebook" style="padding-right:10px;"></i>シェア</button>
115: <button id="print" name="print" class="print_button"><i class="fas fa-print" style="padding-right:10px;"></i>印刷</button>
116:
Font Awesome は、公式サイトからダウンロードして使う方法と、CDN（Content Delivery Network）で利用する方法の2種類がある。ここでは、CDNで使う方法を紹介する。
アイコンの指定方法は、
まず、上のコードのように <link> タグによりCDNから Font Awesome スタイルシートにリンクする。
次に <i> タグのclassを指定することで、目的のアイコンを表示する。
classに指定するのは、スタイルを指定するプレフィックスと、fa-で始まるアイコンの名前である。
アイコンの指定方法は、
- CSS
- Webフォント
- SVG
まず、上のコードのように <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/search から検索する。PRO マークが付いているアイコンは、有償版でないと使えない。
たとえば "twitter" で検索すると、いくつかのアイコンがヒットする。
アイコンをクリックすると、上図の画面に遷移する。赤い矩形で示した部分がアイコンの名前になる。
CSSでアイコンを指定した場合、親オブジェクトのcolor指定がアイコン・カラーに、font-size指定がアイコン・サイズに反映される。
参考サイト
- Font Awesome
- 【Font Awesome】初心者でもすぐ使える！簡単Webアイコン入門：CodeCampus
（この項おわり）
（2024年6月19日）fontawesome 6.5.2対応，X-Twitterボタン追加