FontAwesomeをcodepenで使用する方法を順番に記載しました！
CDN読み込みでの方法です。参考になればと思います。
Font AwesomeのGitHubのページにアクセス
以下サイトにアクセス
https://cdnjs.com/libraries/font-awesome
最新のCDNファイルをコピーする
一番上部の行のCopy Link Tagを押下してコピー
codepen HTMLの歯車マークを押下
Stuff for <head> の部分にコピーしたlinkタグをペースト
ペーストした後は右下のSave＆Closeを押下
Font Awesomeにアクセス
以下サイトにアクセス
https://fontawesome.com/
ヘッダーのIconsを押下
アイコンを選択する
色んなアイコンが選択できるので、対象のアイコンを選ぶ
今回はアップルロゴのアイコンで試し
Start Using Font Awesome を押下
HTMLタグをコピーする
HTMLの右下のコピーボタンでコピーできます
<i class="fab fa-apple"></i>
codepenのhtml部分にペースト
これでcodepenでのアイコン表示はできるようになりました
少し大きさや余白等いじってみた
クラス名の指定で簡単にスタイルを変更できるそうなので、少しいじって見ました。
大変参考になったわかりやすいサイト：
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
See the Pen
Font Awsome demo by Seiya Takahashi (@takasei)
on CodePen.
読んでいただきありがとうございました！
コメント