CSS(CSSとwebフォントによる描画)の2種類あります。CSS(CSSとwebフォントによる描画)での使い方を書いていきたいと思います。JavaScriptと同じですが、回転と反転など一部指定方法が違います。JavaScriptのみでしか出来ないこともあります。※公開からしばらく経ちダウンロードページなどが変更されていたので、一部更新しました。JavaScript(JavaScriptとSVGによる描画)を知りたい方は、下記ページへ。Awesomeを使用するためのまず準備します。この準備には2つの方法があります。CDNを利用する方法とデータをダウンロードして利用する方法の2種類になります。CDNを利用する方法まずは、手っ取り早く簡単に利用できるCDNを利用する方法からご紹介。公式のStartページを確認し指定のCDNのリンクをコピーします。下記のリンクからページに移動し、Webfontを選択した上で(CSSとwebフォントによる描画版を使用する場合)リンクをテキストを選択してコピーするか、右端のアイコンをクリックしコードをコピーしてください。公式のStartページ下記画像の箇所になります。手順2.headタグ内にコードを貼付けコピーしたコードをサイトの<head>〜</head>の中に貼り付けます。これでアイコンフォントの使用準備は完了です。手順1.データをダウンロード公式のダウンロードページに移動しデータをダウンロードします。startページ下部にダウンロードページへのリンクがあります。公式のダウンロードページ下記画像の箇所になります。JavaScriptページのダウンロードデータも一緒です。手順2.データの設置ダウンロードしたzipファイルを解凍すると、様々なファイルが含まれています。CSS(CSSとwebフォントによる描画)を利用するには、all.min.cssの読み込みとwebfontsフォルダが必要です。ダウンロードしたzipファイルには、それぞれの種類のデータだけや圧縮前のファイルも含まれているので、場合によってはそちらを読み込む設定をしてください。データは下記の画像の場所になります。上記のall.min.cssを自分で利用するサイト内の任意の場所に設置してください。all.min.cssと、webfontsフォルダの位置関係(相対パス)が変わらないように気をつけてください。all.min.cssは一つ上の階層のwebfontsフォルダ内のフォントを参照しているのでこちらの相対関係が崩れると表示されません。手順3.headタグ内にデータを読み込むCDNと同様にサイトの<head>〜</head>の中でデータを読み込みます。こちらで使用する準備は完了です。rel="stylesheet"></head>最初に記事を書いたver5.06の頃とはファイルの名前が変更されていました。バージョンによっては、ファイルの場所や名前に変更がある可能性があるのでご注意ください。準備は出来たので早速使っていきましょう。手順1.使いたいアイコンを探す。公式サイトのIconsページから探せます。下記のリンクからIconsページに飛べます。Iconsページ左のカテゴリーをチェックして絞り込んだり、ワードを指定し検索して使用したいアイコンを探します。Free版利用する場合は、まず左のFreeをチェックした方が良いです。使用したいアイコンをクリックして個別アイコンページへ。Iconsページは少し表示が重いので、慣れてきたらチートシートページの利用でも良いかもしれません。個別アイコンページへ移動すると様々な情報がありますが、ページの上部のアイコン名の下ににコードが記載されています。(以前のVer5.06の頃とは表示場所が変わっていますね。)下記画像の箇所のコードをコピーします。ちなみに、個別アイコンページで一番大きなアイコンにカーソルを乗せるとイラストレーターなどで見るパスやアンカーが表示されるので、ベクターデータなのだなと思わされます。手順3.アイコンを表示させたい箇所にコードを貼り付けコードをアイコンを表示したい箇所に貼り付ければ終了です。アイコンが表示されない場合は、CDNやjsの読み込みが失敗している可能性が高いのでパスの確認などをしてみてください。上記で書いたようにiタグなどのclass属性値に、アイコンの分類がSolidの種類のアイコンはfas、Regularの種類のアイコンはfar、Lightの種類のアイコンはfal、Brandsの種類のアイコンはfabと、アイコンごとのクラスを付けるだけです。4でfaとクラスを付けていた部分の指定が少し変更されているので注意してください。CSSでは、フォントというだけありそれぞれの種類にfont-weightが設定されています。CodePen.アイコンの大きさを変えるアイコンを2倍、3倍と変更するには、fa-2x、fa-3xというクラスを追加することで可能です。fa-10xまであります。Awesome4では、fa-5xまで)fa-2xは2倍(2em)〜fa-10xは10倍(10em)になります。-25%)というクラスも用意されています。fa-lgクラスだけサイズ以外のスタイルが追加されているので注意してください。サイズの基準は使用するサイトのCSSを引き継ぐので、場合によっては自分でスタイルを追加してサイズを調整してください。CodePen.等幅サイズ(幅を揃える)アイコンの横幅サイズはそれぞれ違いますが、fa-fwというクラスを追加することでそれぞれのアイコンの幅を揃えることができます。言葉だとわかりづらい点もあるかと思いますので、下の例などで確認してみてください。CodePen.リストアイコンとして使うリストタグにfa-ulとfa-liというクラスを追加することでデフォルトのリストマークと差し替えることができます。ulやolタグにfa-ulクラスを追加。アイコンのiタグの前後にspanタグを追加しfa-liクラスを設定します。CodePen.アイコンを線で囲うfa-borderクラスを追加するとアイコンの上下左右を囲う線を追加できます。薄いグレーの若干角丸のボーダーです。(使う機会は少なそうですが。CodePen.アイコンの右寄せ、左寄せfa-pull-right(右寄せ)、fa-pull-left(左寄せ)クラスを追加するとアイコンを右寄せ、左寄せにできます。(単純にfloat:rightまたはfloat:leftが追加されるみたいです。fa-border"></i>吾輩は猫である。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。あとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。fa-border"></i>吾輩は猫である。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。あとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。JavaScriptと違いますので注意してください。fa-rotate-*(回転)クラスを追加することでアイコンの回転ができます。*の部分は数字を指定(90,180,270のみ用意されているようです。JavaScriptのように角度を自由に指定し回転させることはできません。fa-flip-horizonta(水平反転)、fa-flip-vertical(垂直反転)クラスを追加することでアイコンが反転できます。Icons)重ねるアイコンタグ全体をspanタグなどで囲いfa-stackクラスを追加します。背面など大きく表示するアイコンにclass名fa-stack-2xを追加します。前面など小さく表示するアイコンにfa-stack-1xを追加します。CSSでは、単純に2倍の大きさのアイコンと通常サイズのアイコンを重ねることしか出来ません。JavaScriptのアイコンを重ねる際のレイヤーに近いですができることや指定が違うので注意してください。アイコンにテキストを重ねるクラスも用意されていません。CodePen.擬似要素(::beforeまたは::after)で使用する方法htmlに直接書かずにCSSでアイコンを表示できます。ページ共通でナビに使用する時などはアイコンを一括で変更できたりするので、こちらの方が汎用的かと思います。あとは空要素が嫌いな場合とかも。