【Font Awesome】無料のCOVID-19アイコンの使い方

はじめに

現在、新型コロナウイルスCOVID-19のパンデミックにより世界中で感染が再拡大してます。

原因は感染力が高い変異株の出現ですが、世界中の人々は不要不急の外出自粛で疲れている状況です。

自宅で何か情報発信できることがないか調べたところ、2020年3月23日にFont AwesomeがリリースしたCOVID-19のWebアイコンフォント（以下、アイコン）をもっと広められないか、と思いました。

COVID-19 Awareness Icons - Blog Awesome

Font Awesome 5.13 is out and focuses solely on a set of icons to help drive awareness on how to prevent and fight the COVID-19 virus.

blog.fontawesome.com  

そこで、当ブログでCOVID-19のアイコンを簡単に使用できるよう、Font Awesomeの使用方法を紹介することにしました。

何かのお役に立てれば幸いです。

COVID-19のアイコン一覧

COVID-19のアイコンはFreeが50種類、Proが146種類、計196種類がリリースされてます

Font Awesome Covid 19 Icons

All of the Free and Pro icons available in Font Awesome 5

fontawesome.com

これはFreeのCOVID-19アイコン50種類です。

アイコンの使用方法

Font Awesomeを使用するには、Font AwesomeのCSSを読み込む設定が必要です。 

CSSの読込み

CSSの読込みはCDNを使いますが、方法は2つあります。

1つはヘッダー内にCSSを読み込むHTMLを埋め込む方法で、もう1つはCSSに@importを記述し読み込む方法です。利用環境に応じて、手間がかからない方をご利用下さい。

HTMLでの読み込みコード

<!-- ヘッダに外部CSSを読込みを記述 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">

CSSでの読み込みコード

/* @importで外部CSSをインポート */
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css);

なお、COVID-19のアイコンを表示する場合は、v5.15以上のCSSを使用して下さい。

v5.15.3のCSSのファイルサイズは58KBですが、CSSの読込み量を最小にしたい方は、下記ページでファイルをダウンロード解凍し、必要なCSSのみをご使用下さい。

Font Awesome Hosting Font Awesome Yourself

Learn how to use Font Awesome 5 to add vector icons and social logos to your website, desktop design, or project.

fontawesome.com

アイコンの表示方法

Font AwesomeのアイコンはHTML、或いはCSSの疑似要素で表示します。 

HTMLで表示する方法

表示したいアイコンのHTMLのコードを表示したい位置にコピペして下さい。 

<p><i class="fas fa-head-side-mask fa-2x" style="color: aqua;"></i>マスクを着用しましょう。</p>

 マスクを着用しましょう。

はてなブログでの使用上の注意

はてなブログのHTML編集で上記HTMLをコピペすると、何故か消えてしまう謎の現象が発生します。

同様の現象が出る方は、サルワカさんに対処方法の説明があるので、困った方は参考に見て下さい。

はてなブログでFontAwesomeが使えないときの対処法

saruwakakun.com  

CSSの疑似要素で表示する方法

<p>ココは新型コロナの感染指定<span class="hospital">病院</span>ではありません。</p>

.hospital::before {
  font-family: "Font Awesome 5 Free";
  content: '\f0f8';
  font-weight: 400;
  font-size:200%;
  color: red;
}

ココは新型コロナの感染指定病院ではありません。

アイコンのサイズ・角度・動きを変更する方法

 Font Awesomeは<i class=””>内にオプションのクラスを追加することで、アイコンのサイズ・角度・動きを簡単に制御することができます。

利用頻度が高そうなものについて一覧表にまとめてみました。お好みのものを追加してご利用下さい。 

まとめ

新型コロナウイルスCOVID-19の猛威は、いつ収束するか分からない状況です。

Font AwesomeのCOVID-19アイコンがどれくらいお役に立てるかは分かりませんが、Webの情報発信で効果的に使ってもらえることを、一弱小ブロガーとして祈ってます。

最後にオリンピックのFreeアイコンがたった4つしかないのが少し残念でした。パリ五輪までに全種目を作って頂けるとありがたいです。

気軽に足跡残してね！

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

https://t.co/YX07beUK4d

COVID-19アイコンの使い方を記事にまとめて見ました。
興味がある方は、ブログで使ってみて下さい。#FontAwesome　#COVID19

— heavy-peat (@AfterWork_Lab) August 3, 2021

それでは今回の記事はこれでおしまい。