バージョンが5になって、つぎの2つの方法で使用できるようになっています。JavaScript)2つの使用方法についてはつぎのとおり、5つのカスタマイズ方法があります。(使い方1-2)」について説明しています。基本的な使い方」を参照してください。他のカスタマイズ方法につては、多くのWebサイトで紹介されています。備つぎのような準備があります。Web)をダウンロードします。5フォントttfファイルのインストールダウンロードしたfontawesome-free-5.12.0-web.zip(ファイル名は2020年1月2日現在)ファイルを解凍し、webfontsフォルダ内の3つのttfファイルをインストールします。ポップアップメニューの「インストール(i)」を左クリックつぎに、インストール結果をまとめました。CSSファイルを、<head>タグ内に、つぎのサイトを参照しCDNのall.cssまたはall.min.cssのURLをコピーしインクルードします。Solidを使用する場合は、CSSファイルは不要です。CSSの疑似要素(::before/::after)の使い方(HTML/CSS)ttfファイルを使う場合、CSSの::before(::after)擬似要素で、HTMLタグ要素の直前(直後)にWebフォントアイコンを挿入します。挿入内容Webフォントアイコンはcontentプロパティで指定します。Regularフォントアイコンを表示します。この文の直前、直後にWebフォント絵文字アイコンを表示します。この文の直前、直後にWebフォント絵文字アイコンを表示します。5アイコン一覧から探し出しますそのアイコンをダブルクックして、そのアイコンのデータを表示しますUnicodeコードをコピーして設定します。とき、先頭に"\"を付けCSSに"\f10d"を設定します。SolidおよびBrandsは、font-weightを省略できます。5の「アイコン一覧」ページへリンクしています。・Regularの場合、「アイコン一覧」で、Proアイコンはグレイ表示になっていますがFreeで使用できます。・Solidの場合、「アイコン一覧」で、グレイ表示のProアイコンは使用できません。・Brandsの場合、Pro,Freeの区別がなく、すべて使用できます。Solidの使い方3つのSolidアイコンを、順にliタグ要素の先頭、直後、先頭に、横並びに表示する例です。Brandsの使い方3つのBrandsアイコン(twitter,facebook,instagram)を、順にliタグ要素の先頭、先頭、先頭に、横並びにSNSアイコンを表示する例です。Free(Regular)の使い方3つのRegularアイコン(twitter,facebook,instagram)を、順にdivタグ要素の先頭、直後、先頭に、横並びに表示する例です。5のCSSファイルを使用します(「HTML全体まとめ」タブ内参照)。5の応用例として引用タグ(blockquote・p・citeタグ)の使い方を取り上げます。通例、引用文はBlockquote要素内に、pタグで引用文、citeタグで引用元情報を記述し、引用記号(”)を直前または直後表示します。年末年始は冬将軍が到来。北海道や東北の日本海側を中心に荒れた天気になりそうです。年末年始は冬将軍が到来。北海道や東北の日本海側を中心に荒れた天気になりそうです。5にバージョンアップしてみました。5へのバージョンアップは、つぎの2つの項目を変更します。オーソドックスなデザインから。どんなサイトにも馴染みやすいはずです。違いが分かりづらいかもしれませんが、引用符が文の左側に配置されるようになっています。影をつけて、少し浮き上がったように見せています。色は好みで変えてくださいませ(CSSの#9dd4ffで水色を指定しているので、これを好きな色コードに変えればOKです)。引用マークを左に配置したバージョンです。締まった雰囲気を出したいときに使うのがおすすめです。{color:~}の部分)は、サイトに雰囲気に合わせて変えると良いでしょう。背景を少し濃い目の色で塗っています。文字は見えづらくならないように太字にしています。太めの枠で囲むとさらに力強いデザインになります。派手なので、使いどころは選ぶかもしれませんね。左上からピョコンと引用符がはみ出るようなデザインです。分かりづらいですかね。比較的使いやすいデザインかと思います。#ddeaff;})は必要に応じて変えてくださいませ。ユニークな見た目にしてみました。目を引きたい場合にご利用くださいませ。かわいく見せたいときに使うと良いでしょう。{~}をまるっと削除すれば右下のマークは消えます)。こちらも必要に応じて右下の引用マークを消してくださいませ。引用を示す部分と文章をはっきりと分けてみました。比較的使いやすいのではないでしょうか。borderプロパティのカラーコード「#3ca5d4」を書き換えることで、色を変えることができます。線を使わずに塗りつぶしてみました。形はさきほどと同じです。質素な見た目にして、影をつけています。影が不要であれば、box-shadow:~;を削除してくださいませ。引用符を少しユニークな形にして、左角に配置しました。柔らかい雰囲気を出したいときに使うのが良いでしょう。引用符を円で囲み、オレンジ系統でまとめてみました。さきほどの色違いです。ウェブサイトの雰囲気に合わせて選んで頂ければと思います。1番使いやすい配色かもしれません。垂れ下がったようなレイアウトにしてみました。上の線(border-top)は不要であれば消してくださいませ。上の色違いのものです。同様に、色違いのものです。リボンをつけたようなデザインにしてみました。派手ですが、目を引くはずです。さきほどと形は同じですが、落ち着きのある配色にしてみました。横から紙が折り込まれているようなデザインです。border-bottom:~;)を削除してもらえればと思います。使いやすい配色にして、さらに影をつけてみました。上から折り目のついて紙がかかっているような見た目にしてみました。目を引くわりに派手すぎず使いやすいかもしれません。引用符を思い切って大きくし、さらに文字の下に少し配置してみました。読みづらいかもしれませんが、その分ボックスのサイズはミニマムになります。なんとなく桜っぽい配色にしてみました。爽やかで透明感のある配色にしてみました。