after work Lab

少しHでニッチな「Webデザイン、家電・IT」のカスタマイズBlogです

新型コロナウイルスのアイコンを使って感染拡大を防止しよう!

はじめに

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

 

不要不急の外出を自粛しなければならない中、自宅で何か出来ることがないか調べたところ、Font Awesomeが3月23日にCOVID-19のWebアイコンフォント(以下、アイコン)をリリースしたことを知りました。

COVID-19 Awareness Icons

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.

 

 

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

 

ブロガーの皆様がCOVID-19のアイコンを使用することで、一人でも多くの方に新型コロナウイルスに関しての危機が伝わり、安全に生活できる日が早く訪れることを願います。

 

 

COVID-19のアイコン一覧

 

COVID-19のアイコンはFreeが47種類、Proが141種類、計188種類がリリースされてます。

Font Awesome Covid 19 Icons

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

 

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

 

コードをコピペして使えるよう、Freeの47種類を一覧表にまとめました。

 

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-lungs-virus"></i> \f967
22   <i class="fas fa-laptop-house"></i> \f966
23   <i class="fas fa-hospital-symbol"></i> \f47e
24   <i class="fas fa-hospital-alt"></i> \f47d
25   <i class="fas fa-hospital"></i> \f0f8
26   <i class="fas fa-hospital" style="font-weight: 400"></i> \f0f8
27   <i class="fas fa-head-side-virus"></i> \f964
28   <i class="fas fa-head-side-mask"></i> \f963
29   <i class="fas fa-head-side-cough-slash"></i> \f962
30   <i class="fas fa-head-side-cough"></i> \f961
31   <i class="fas fa-handshake-slash"></i> \f960
32   <i class="fas fa-handshake-alt-slash"></i> \f95f
33   <i class="fas fa-hand-sparkles"></i> \f95d
34   <i class="fas fa-hand-holding-water"></i> \f4c1
35   <i class="fas fa-hand-holding-medical"></i> \f95c
36   <i class="fas fa-box-tissue"></i> \f95b
37   <i class="fas fa-temperature-low"></i> \f76b
38   <i class="fas fa-stopwatch-20"></i> \f96f
39   <i class="fas fa-soap"></i> \f96e
40   <i class="fas fa-shield-virus"></i> \f96c
41   <i class="fas fa-lungs"></i> \f604
42   <i class="fas fa-disease"></i> \f7fa
43   <i class="fas fa-pump-soap"></i> \f96b
44   <i class="fas fa-pump-medical"></i> \f96a
45   <i class="fas fa-plane-slash"></i> \f969
46   <i class="fas fa-store-slash"></i> \f971
47   <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://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet">

 

CSSでの読み込みコード

 

/* @importで外部CSSをインポート */
@import url(https://use.fontawesome.com/releases/v5.13.0/css/all.css);

 

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

 

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

Font Awesome How to Use

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をコピペすると、何故か消えてしまう謎の現象が発生します。

 

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

 

 

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 意味
サイズ
   fa-xs 0.75倍
   fa-sm 0.875倍
  - 等倍
  fa-lg 1.33倍
  fa-2x 2倍
  fa-3x 3倍
  fa-4x 4倍
  fa-5x 5倍
  fa-6x 6倍
   fa-7x 7倍
  fa-8x 8倍
   fa-9x 9倍
  fa-10x 10倍
横位置    fa-fw 横幅をそろえる
角度
  fa-rotate-90 90°回転
  fa-rotate-180 180°回転
  fa-rotate-270 270°回転
反転
  fa-flip-horizontal 水平方法に反転
  fa-flip-vertical 垂直方法に反転
回転   fa-spin 回転させる
ステップ回転   fa-pulse 8ステップで回転
ボーダー   fa-border 枠で囲む

 

 

まとめ

 

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

 

 

日本政府の動きは世界レベルからズレているためか、危機的な状況をなかなか実感できないのですが、私たちは今、COVID-19によって「命」と「生活」の究極の選択を迫られてます。

 

もちろん「命」が第一優先なのですが、「生活」が破綻しドン底になることも避けたいです。

 

ドン底の期間を出来るだけ短くするために、身勝手な行動を慎むよう、みんなで警鐘することが必要です。

 

そのために、一人でも多くのブロガーがFont AwesomeのCOVID-19アイコンを利用し、Webで効果的に使ってもらえることを、一弱小ブロガーとして祈ってます。

 

なお、STAY AT HOME だからと言って、家に引きこもってエロ動画の見過ぎは体に良くありません。

 

三重県ではありませんが、エロ動画の閲覧は1日1時間以内に抑えましょう。(笑)

 

♡いいねはこちら

この記事が「面白かった・参考になった」と感じた方は、♡いいねを押して頂けると嬉しいです。

 この記事のツイートを♡いいねする

 

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