Awesome」がicon8で公開されていたので忘備録。5.11.2の無料の代替アイコンとして作成されたそうです。ダウンロード版もありますがCDNを使用した使い方も解説します。AwesomeのCDNに変更するだけでラインアイコンが適用されるようになります。新規で使用する場合のCDNも用意されているので、用途に合わせ使い分けましょう。Awesomeは32×32ピクセルになっています。小さく表示する場合は、ラインが潰れてしまうケースもありますので、32×32ピクセル以上で扱うほうがよいでしょう。AwesomeのCDNと差し替えます。Installから下段のCDNをコピーし表示させたいページのhead内にペーストします。Awesomeのサイトで最新のCDNをコピペしてください。Awesomeを新規で使用する場合の使い方です。ページから使用したいアイコンを探します。使用したいアイコンが見つかったらアイコンをクリックしてコードをコピー、表示させたい箇所にペーストでアイコンが表示されます。Awesomeを同様にアイコンのカラーをCSSで変更することができます。</span></span>5アイコンのサイズを変更するサイズのclassが用意されているのでサイズを変更したい場合はclassにla-xsla-smla-lgla-2x~la-10xを追加します。オリジナルのCSSを追加しfont-sizeでサイズを変更することもできます。la-10x"></i>6アイコンの向きを変更する角度のclassを追加することで角度(90°/180°/270°)反転(水平/垂直)を変更することができます。la-flip-vertical"></i>la-rotate-9090°la-rotate-180180°la-rotate-270270°la-flip-horizontal水平(横)に反転la-flip-horizontal垂直(縦)に反転7アイコンを回転させるローディングアニメーションで使えそうな回転するアイコンもclassにla-spinを追加するだけで機能します。la-pulseにすると、8ステップで1回転するアニメーションとなります。8アイコンを使ったメニューナビゲーションメニューもアイコンを配置するだけで視覚的にイメージが伝わりやすくなります。Awesomeと同様にCSSの疑似要素も使えるかな?と名称を変更してみたらできました。"\f099"を記述します。Unicodeは各アイコンページにてコピーできます。Brands";となります。Awesomeを同様に扱えるようですね。Awesomeよりもこちらの方がシャープで使いやすそうな印象です。Awesomeの記事で同様のアイコンを表示しているので比較してみてください。