Tweet

Font Awesome（Webフォントアイコン）の使い方のメモ。

Font Awesome
https://fontawesome.com/

link要素

Start | Font Awesome
https://fontawesome.com/start

CSSプロパティ

Basic Use | Font Awesome
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

CSS Pseudo-Elements | Font Awesome
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Style Solid

font-family: "Font Awesome 5 Free";
font-weight: 900;

Style Brands

font-family: "Font Awesome 5 Brands";
font-weight: 400;

その他

現象

Font Awesomeのページでアイコンを検索しサイトに反映したが、アイコンが表示されない。

原因

サイトで読み込んでいるFont AwesomeのCSSが古く、該当のアイコンが存在しないバージョンだった。

対応

link要素を最新版の記述に差し替え、最新のCSSを読み込んだ。

結果

正しくアイコンが表示された。

Tweet