CodePenでアイコンの表示の仕方が分からない方は、この記事を参考にしてください。
Font Awesomeについてはこちらで詳しく説明しています。
ぜひご一読ください。
Font AwesomeのCDNファイルを入手
FontawesomeのGitHubページから、CDNファイルを入手します。
![](https://spicaweblog.com/wp-content/uploads/2022/04/b8662acd7f4e2760199232dc04839125-1024x475.png)
一番上の薄いオレンジ色のところが最新版です。
</>(Copy Link Tag)をクリックするとコピーできます。
↓2022年4月では、こちらが最新版となっています。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
CodePenでCDNを読み込む
FontAwesomeを使いたいPenを開き、HTMLの歯車マークをクリックします。
![](https://spicaweblog.com/wp-content/uploads/2022/04/a40442908cb0ab6fa8b6bba80a2bc59d-1024x469.png)
「Pen Settings」画面が出ますので、「HTML」になっていることを確認し、右側の「Stuff for <head>」の枠内にFontAwesome GitHubからコピーしたCDNファイルのリンクタグをペーストします。
「Save & Close」をクリックして保存。
![](https://spicaweblog.com/wp-content/uploads/2022/04/da0a4ed46c901d00e70f468446698b8f-1024x469.png)
FontAwesomeでアイコンを探す
FontAwesome公式ページから、お好きなアイコンを選んでください。
![](https://spicaweblog.com/wp-content/uploads/2022/04/d845b79c68a81bcdfcf0d4b43dc9cb82-1024x469.png)
検索は英語です。
使いたいアイコンが見つかったらクリック。
![](https://spicaweblog.com/wp-content/uploads/2022/04/d0c40e6fdbe60609aefccd7bdb5990f3-1024x469.png)
タグが表示されていますので、そのエリアをクリックしてコピー。
![](https://spicaweblog.com/wp-content/uploads/2022/04/08367ef67929dc0db3e6ee63357e78b1-1024x469.png)
CodePenに貼り付ける
CodePenに戻って、HTMLにさきほどコピーしたタグをペーストします。
プレビュー画面にアイコンが表示されていたら成功です!
![](https://spicaweblog.com/wp-content/uploads/2022/04/93d357dbfd7c3e750124eb6cb7658c91-1024x469.png)
うまく表示されていない、アイコンの形が違う、という場合は、CDNファイルのバージョンと検索したアイコンのバージョンが異なっている可能性があります。
- https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css
![](https://spicaweblog.com/wp-content/uploads/2022/04/fa_search.png)
もちろん、色やサイズのカスタマイズもできますよ!
See the Pen Untitled by spica (@spica_blog) on CodePen.
Font Awesome 5のチートシートです。
コメント