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制作

執筆者:

関連記事

今からレスポンシブサイトを作る時のメディアクエリとブレイクポイント【2017年度版】

新しくサイトを作ることになった。 もちろん、レスポンシブ対応で。 そこで改めて、ブレイクポイントを考えてみことにした。 Googleでは「モバイルファースト」を推奨している。さらに「モバイルファースト …

no image

CSS 重なり順序を指定する

背景画像を複数重ねるなら CSS3 より、要素に複数の背景を適用できるようになりました。 複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、指定した順に重ねて …

no image

HTML特殊文字—ちょっと使いたい時に

 よく使う記号、使われる記号、いざという時の… < &lt; &#60; > &gt; &#62; 左の二つは、HTMLなどのマークアップ言語で …

olタグで丸括弧付きの数字にする方法

olタグで丸括弧()付きの数字にしたかったので、CSSで設定する方法を調べてみました。いろいろと試した結果、下記の設定で上手くいったのでメモしておきます。CSSの書き方によっては、2行目のインデントが …

CSS★span要素内のテキストを上下中央に配置する

ナビ項目の文字の後ろに「▼」をつけたのですが、そのままだと、文字よりも「▼」のほうが大きく見えてしまい、文字よりも「▼」が目立ってしまった(汗) それを解消するために「span」で「▼」だけフォントサ …

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