【css】FontAwesomeをcodepenで使用する方法

スポンサーリンク
css

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.

読んでいただきありがとうございました!

css
スポンサーリンク
app crafts

コメント

タイトルとURLをコピーしました