【Font Awesome】無料のCOVID-19アイコンの使い方
はじめに
現在、新型コロナウイルスCOVID-19のパンデミックにより世界中で感染が再拡大してます。
原因は感染力が高い変異株の出現ですが、世界中の人々は不要不急の外出自粛で疲れている状況です。
自宅で何か情報発信できることがないか調べたところ、2020年3月23日にFont AwesomeがリリースしたCOVID-19のWebアイコンフォント(以下、アイコン)をもっと広められないか、と思いました。
そこで、当ブログでCOVID-19のアイコンを簡単に使用できるよう、Font Awesomeの使用方法を紹介することにしました。
何かのお役に立てれば幸いです。
COVID-19のアイコン一覧
COVID-19のアイコンはFreeが50種類、Proが146種類、計196種類がリリースされてます
これはFreeのCOVID-19アイコン50種類です。
# | icon | class | unicode |
1 | <i class="fas fa-user-nurse"></i> | \f82f | |
2 | <i class="fas fa-user-md"></i> | \f0f0 | |
3 | <i class="fas fa-thermometer"></i> | \f491 | |
4 | <i class="fas fa-syringe"></i> | \f48e | |
5 | <i class="fas fa-stethoscope"></i> | \f0f1 | |
6 | <i class="fas fa-people-arrows"></i> | \f968 | |
7 | <i class="fas fa-microscope"></i> | \f610 | |
8 | <i class="fas fa-house-user"></i> | \f965 | |
9 | <i class="fas fa-hospital-user"></i> | \f80d | |
10 | <i class="fas fa-hands-wash"></i> | \f95e | |
11 | <i class="fas fa-faucet"></i> | \f905 | |
12 | <i class="fas fa-clinic-medical"></i> | \f7f2 | |
13 | <i class="fas fa-biohazard"></i> | \f780 | |
14 | <i class="fas fa-ambulance"></i> | \f0f9 | |
15 | <i class="fas fa-viruses"></i> | \f976 | |
16 | <i class="fas fa-virus-slash"></i> | \f975 | |
17 | <i class="fas fa-virus"></i> | \f974 | |
18 | <i class="fas fa-toilet-paper-slash"></i> | \f972 | |
19 | <i class="fas fa-toilet-paper"></i> | \f71e | |
20 | <i class="fas fa-temperature-high"></i> | \f769 | |
21 | <i class="fas fa-sink"></i> | \e06d | |
22 | <i class="fas fa-lungs-virus"></i> | \f967 | |
23 | <i class="fas fa-laptop-house"></i> | \f966 | |
24 | <i class="fas fa-hospital-symbol"></i> | \f47e | |
25 | <i class="fas fa-hospital-alt"></i> | \f47d | |
26 | <i class="fas fa-hospital"></i> | \f0f8 | |
27 | <i class="fas fa-hospital" style="font-weight: 400"></i> | \f0f8 | |
28 | <i class="fas fa-head-side-virus"></i> | \f964 | |
29 | <i class="fas fa-head-side-mask"></i> | \f963 | |
30 | <i class="fas fa-head-side-cough-slash"></i> | \f962 | |
31 | <i class="fas fa-head-side-cough"></i> | \f961 | |
32 | <i class="fas fa-handshake-slash"></i> | \f960 | |
33 | <i class="fas fa-handshake-alt-slash"></i> | \f95f | |
34 | <i class="fas fa-hand-sparkles"></i> | \f95d | |
35 | <i class="fas fa-hand-holding-water"></i> | \f4c1 | |
36 | <i class="fas fa-hand-holding-medical"></i> | \f95c | |
37 | <i class="fas fa-box-tissue"></i> | \f95b | |
38 | <i class="fas fa-temperature-low"></i> | \f76b | |
39 | <i class="fas fa-stopwatch-20"></i> | \f96f | |
40 | <i class="fas fa-soap"></i> | \f96e | |
41 | <i class="fas fa-shield-virus"></i> | \f96c | |
42 | <i class="fas fa-lungs"></i> | \f604 | |
43 | <i class="fas fa-disease"></i> | \f7fa | |
44 | <i class="fas fa-bacterium"></i> | \e05a | |
45 | <i class="fas fa-bacteria"></i> | \e059 | |
46 | <i class="fas fa-pump-soap"></i> | \f96b | |
47 | <i class="fas fa-pump-medical"></i> | \f96a | |
48 | <i class="fas fa-plane-slash"></i> | \f969 | |
49 | <i class="fas fa-store-slash"></i> | \f971 | |
50 | <i class="fas fa-store-alt-slash"></i> | \f970 |
アイコンの使用方法
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.
アイコンの表示方法
Font AwesomeのアイコンはHTML、或いはCSSの疑似要素で表示します。
HTMLで表示する方法
表示したいアイコンのHTMLのコードを表示したい位置にコピペして下さい。
コード
<p><i class="fas fa-head-side-mask fa-2x" style="color: aqua;"></i>マスクを着用しましょう。</p>
マスクを着用しましょう。
はてなブログでの使用上の注意
はてなブログのHTML編集で上記HTMLをコピペすると、何故か消えてしまう謎の現象が発生します。
同様の現象が出る方は、サルワカさんに対処方法の説明があるので、困った方は参考に見て下さい。

はてなブログでFontAwesomeが使えないときの対処法
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=””>内にオプションのクラスを追加することで、アイコンのサイズ・角度・動きを簡単に制御することができます。
利用頻度が高そうなものについて一覧表にまとめてみました。お好みのものを追加してご利用下さい。
内容 | icon | class | 意味 |
サイズ(0.75倍) | fa-xs | 0.75倍 | |
サイズ(0.875倍) | fa-sm | 0.875倍 | |
サイズ(等倍) | - | 等倍 | |
サイズ(8倍) | fa-lg | 1.33倍 | |
サイズ(2倍) | fa-2x | 2倍 | |
サイズ(3倍) | fa-3x | 3倍 | |
サイズ(4倍) | fa-4x | 4倍 | |
サイズ(5倍) | fa-5x | 5倍 | |
サイズ(6倍) | fa-6x | 6倍 | |
サイズ(7倍) | fa-7x | 7倍 | |
サイズ(8倍) | fa-8x | 8倍 | |
サイズ(9倍) | fa-9x | 9倍 | |
サイズ(10倍) | fa-10x | 10倍 | |
横位置 | fa-fw | 横幅をそろえる | |
回転(90°) | fa-rotate-90 | 90°回転 | |
回転(180°) | fa-rotate-180 | 180°回転 | |
回転(270°) | fa-rotate-270 | 270°回転 | |
反転(水平) | fa-flip-horizontal | 水平方法に反転 | |
反転(垂直) | fa-flip-vertical | 垂直方法に反転 | |
回転 | fa-spin | 回転させる | |
ステップ回転 | fa-pulse | 8ステップで回転 | |
ボーダー | fa-border | 枠で囲む |
まとめ
新型コロナウイルスCOVID-19の猛威は、いつ収束するか分からない状況です。
Font AwesomeのCOVID-19アイコンがどれくらいお役に立てるかは分かりませんが、Webの情報発信で効果的に使ってもらえることを、一弱小ブロガーとして祈ってます。
最後にオリンピックのFreeアイコンがたった4つしかないのが少し残念でした。パリ五輪までに全種目を作って頂けるとありがたいです。
気軽に足跡残してね!
この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。
https://t.co/YX07beUK4d
— heavy-peat (@AfterWork_Lab) August 3, 2021
COVID-19アイコンの使い方を記事にまとめて見ました。
興味がある方は、ブログで使ってみて下さい。#FontAwesome #COVID19
それでは今回の記事はこれでおしまい。