off.tokyo｜スキルキャリアもっと輝け

Font Awesomeでアイコンでない時に確認すること

藤沢瞭介(Ryosuke Hujisawa)

2022年11月14日

Font Awesomeでアイコンでない時に確認すること

『Font Awesome cdn』と調べる

『Font Awesome cdn』と調べると、Font Awesomeをコピペで使えるCDNが出るので、それを使う。

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to m...

https://cdnjs.com/libraries/font-awesome

The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library files on your websites.

一番新しいのを使えば良いです。

htmlのheadとかにコピペすればOK

その下にCSSファイルを読み込ませましょう。

CSSを読み込む

font-family: “Font Awesome 5 Free”;

上記のように書く。

フォントのIDを確認する

fontawesome.com

Pointer (Hand) Regular Icon | Font Awesome

https://fontawesome.com/icons/hand-pointer?s=regular&f=classic

Pointer (Hand) icon in the Regular style. Smooth out your design with easygoing, readable icons. Available now in Font Awesome 6.

参考にした記事

株式会社ウェブ企画パートナーズ

FontAwesomeでアイコンが□（四角）になって表示されない場合の対策まとめ（:after:...

https://wk-partners.co.jp/homepage/blog/hpseisaku/htmlcss/fontawesome-trouble/

fontawesome.com

Hands Icons | Font Awesome

https://fontawesome.com/icons/categories/hands

Hands icons from Font Awesome, the world's favorite icon library and toolset.

藤沢瞭介(Ryosuke Hujisawa)
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！

css プログラミング言語

コメントするコメントをキャンセル