はじめに
今、新型コロナウイルスCOVID-19のパンデミックにより世界中で感染が拡大してます。
不要不急の外出を自粛しなければならない中、自宅で何か出来ることがないか調べたところ、Font Awesomeが3月23日にCOVID-19のWebアイコンフォント（以下、アイコン）をリリースしたことを知りました。
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のアイコン一覧
COVID-19のアイコンはFreeが47種類、Proが141種類、計188種類がリリースされてます。
All of the Free and Pro icons available in Font Awesome 5
これはFreeのCOVID-19アイコン47種類です。
コードをコピペして使えるよう、Freeの47種類を一覧表にまとめました。
アイコンの使用方法
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のみをご使用下さい。
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=””>内にオプションのクラスを追加することで、アイコンのサイズ・角度・動きを簡単に制御することができます。
利用頻度が高そうなものについて一覧表にまとめてみました。お好みのものを追加してご利用下さい。
まとめ
新型コロナウイルスCOVID-19の猛威は、いつ収束するか分からない状況です。
日本政府の動きは世界レベルからズレているためか、危機的な状況をなかなか実感できないのですが、私たちは今、COVID-19によって「命」と「生活」の究極の選択を迫られてます。
もちろん「命」が第一優先なのですが、「生活」が破綻しドン底になることも避けたいです。
ドン底の期間を出来るだけ短くするために、身勝手な行動を慎むよう、みんなで警鐘することが必要です。
そのために、一人でも多くのブロガーがFont AwesomeのCOVID-19アイコンを利用し、Webで効果的に使ってもらえることを、一弱小ブロガーとして祈ってます。
なお、STAY AT HOME だからと言って、家に引きこもってエロ動画の見過ぎは体に良くありません。
三重県ではありませんが、エロ動画の閲覧は1日1時間以内に抑えましょう。（笑）
♡いいねはこちら
この記事が「面白かった・参考になった」と感じた方は、♡いいねを押して頂けると嬉しいです。
https://t.co/e0ieDMFvu8
— heavy-peat (@AfterWork_Lab) May 4, 2020
5月29日まで「STAY HOME🏡」継続ですね。
でもガマンにも限界があります。😟#STAYHOME #ステイホーム #新型コロナウイルス
それでは今回の記事はこれでおしまいです。