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変数で色の管理を楽にする!

プログラミングでは「変数」ってよく使いますが、CSSでも使えるようになってました!サイト制作では、CSSがドンドン長くなって、あとで修正するのが大変になりますよね。特に、色を変える時は、ひとつずつカラ …

二重の打ち消し線にする方法

あるサイトの更新で、日付を打ち消し線で消して、次の行に新しく正しい日付を掲載するよう修正してほしいとの要望がありました。 打ち消し線は、cssでスタイルをもたせてやればスグにできます。   …

CSS★テキストにグラデーションをつける

文字にグラデーションカラーをつけるといえば、イラストレーターなどで画像を用意してからサイト内に配置というのがお約束だったんだけど、CSSだけで実現できるようになりました。 先日の勉強会で習ったばかりの …

フロート解除★clearfixの使い方

フロート解除の指定方法 <CSS> .clearfix:after { content:” “; display:block; clear:both; }   <HTML> <div …

CSS 可変で文字サイズを変更する

「画面サイズに合わせて文字の大きさも変化させたい」けど、「em」や「rem」や「%」ではうまくいかない。 早速ググってみると。。。ありました! vw(ViewportWidth)とvh(Viewpor …

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