CSS WEB制作

CSS★fontawesome 6 を疑似要素で使う

投稿日:

リニューアル案件でfontawesomeを使用。MacでのテストはOKだけど、Winで表示テストすると文字化けしてアイコンフォントが表示されない。恐らくCSSの設定が間違ってるんだ!と思ったので、いろいろと調べて実験してみた。

正しく表示されたコード

まずは、結論から。うまく表示されたコードはこれ。

.login::before {
  font: var(--fa-font-solid);
  content: "\f007";
}
  • html内でfontawesomeのCSSを読み込んでおく。
  • 疑似要素に使うコロン「:」はシングルでもダブルでも表示された。
    公式サイトでの推奨はダブルコロン「::」
  • contentには、Unicodeを書く。
    Unicodeの前にはバックスラッシュ「\」を必ず入れておく。

アイコンは「free」の中から選ぶこと。
使いたいアイコンをクリックすると、詳細が表示される。

右上部の「Unicode」をコピペ。
左下部の「HTML」タブで表示が
・fa-regular
・fa-brands
となっていれば使用可能なアイコン。
CSSへはどちらの場合も「 font: var(–fa-font-solid); 」とすること。

現在有効なCDNのリンク先:
https://cdnjs.com/libraries/font-awesome

右端中央のアイコンをクリックして「Copy Link Tag 」をHTMLファイルの<header>〜</header>内に貼り付けること。

★表示例

※このサイトではFontawesome 5 のCDNを読み込んでいるため、コードは従来方式で書いていますが、実際の案件では上部のコードでちゃんと表示されました。

従来方式で書く場合

今までの疑似要素の書き方の場合は、font-familyの設定を下記のようにすると表示された。

.ins::after {
  font-family: "FontAwesome";
  font-weight: 400;
  content: "\f16d";
}
★表示例
アイコンフォントinstagram

まとめ

公式サイトからはCDNの表示はなくなっていました。
そのかわりに、無料で使えるKitの利用を推奨。
でも、無料版だと使用できるセットは1つのみで、月間のページビューが1万ビューまでの制限がある。複数のサイトで使用したい場合はプロ版にしなきゃいけないみたい。ちなみにプロ版だと、20セットまでつくることができて、ページビューは100万ビューまでOK。費用は年間99ドルでした。
今までどおりCDNで動いてて欲しいなー!

★参考にさせていただいたサイト:
https://teruakiblog.com/pseudoelement_fontawesome/
https://wk-partners.co.jp/homepage/blog/hpseisaku/htmlcss/fontawesome-trouble/

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-CSS, WEB制作

執筆者:

関連記事

CSS★画像の上に文字を重ねる

画像の上に文字を重ねる 配置した画像の上に文字を重ねたいとき、CSSだけでできちゃいます! 下になるアイテムに「position: relative;」= 相対位置を設定します。 次に上に重ねるアイテ …

超簡単!オリジナルのSVGアイコンの作り方

SVGファイルから簡単にアイコンフォントが作れるサービス、「IconMoon」は超有名ですね。 時々使っているのですが、書き出しから実装まで、いざとなると「あれ?どうだっけ。。。」って忘れてしまうこと …

レスポンシブサイト★ウインドウサイズにあわせて画像を拡大縮小させる

レスポンシブサイトでの画像のリサイズ問題   ウインドウサイズに合わせて、画像を拡大縮小させる方法。 CSSだけで解決できます。     <css>  img{ width:100%; max-wid …

CSS★最後の要素だけスタイルを適用させない

最後の要素だけスタイルを適用させたくないときには、疑似要素を使って指定するのが定番。CSSにもいろんな書き方があるけど、便利な方法を見つけたのでメモしておく。 兄弟要素の最後の要素だけスタイルを適用し …

CSS★画像を右寄せにする

画像を右寄せにする方法 デフォルトは左寄せになっています。   右寄せにする手順 (1)画像をブロック要素として囲む。    ブロック要素= div・p・ul・li・dl など ブロック要素 …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。