はじめに
現在、新型コロナウイルス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つしかないのが少し残念でした。パリ五輪までに全種目を作って頂けるとありがたいです。
気軽に足跡残してね！
この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。
それでは今回の記事はこれでおしまい。
0 件のコメント:
コメントを投稿