Click

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

2021/08/03

WebDesign

COVID-19アイコン

はじめに

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

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

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

blog.fontawesome.com


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

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


COVID-19のアイコン一覧

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

fontawesome.com


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


コードをコピペして使えるよう、Freeの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のみをご使用下さい。

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

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

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=””>内にオプションのクラスを追加することで、アイコンのサイズ・角度・動きを簡単に制御することができます。

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

内容 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の猛威は、いつ収束するか分からない状況です。



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

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



気軽に足跡残してね!

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

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

Advertisements

Author

自分の写真
IT全般およびWebサイトについてお勉強したことを勝手気ままに書いてまーす。
\ Follow me! /

Follower

Labels

Internet (10) PC (10) Blog (8) Repair (7) WebDesign (7) Windows10 (7) Security (6) Blogger (5) YouTube (5) SEO (4) SmartSpeaker (4) hatenablog (4) Audio (3) CSS (3) Cooking (3) HTTPS (3) Review (3) Domain (2) GitHub (2) HDD (2) JavaScript (2) MFI (2) Node.js (2) Ads (1) Anime (1) Beer (1) Browsersync (1) Coding (1) Customize (1) Editor (1) Git (1) Google (1) Life (1) Monitor (1) New Year (1) Nomad Code (1) Smart Watch (1) Twitter (1) Windows (1) iPhone (1) nodist (1)

Sponsored Links

QooQ