Topics インフォコネクト最新情報

CodePenでFont Awsomeを使うための設定方法

2023.01.30

インフォコネクトWebの豆知識

この記事は公開から1年以上経過しています。

こんにちは、チーフクリエイターのSHOJIです。

前回の豆知識では『CodePenでソースコードをWordPressに埋め込む方法』と題して、CodePenの登録から使い方、ブログへの埋め込み方法までご紹介しましたが、記事の最後で案内したように、今回はCodePenでFont Awsomeを使う方法について解説していきたいと思います。

CodePenをWordPressのブログ記事に埋め込みソースコードを表示する | インフォコネクト株式会社

① CodePenのエディタ画面内、HTMLパネル上部の［］をクリックします。

CodePenでFont Awsomeを使う方法

② 「Pen Settings」画面が表示されるので、左メニュー内の［HTML］をクリックし、画面下部の「Stuff for <head>」部分にFont AwsomeのCDNを記述して［Save & Close］をクリックします。

CodePenでFont Awsomeを使う方法

③ HTMLパネルに、表示したいフォントアイコンのコードを記述すると、Resultパネルにアイコンが表示されます。

CodePenでFont Awsomeを使う方法

上の図では分かりづらいので、実際にCodePenで確認していただきたいのですが、今回はCodePenのロゴにおいてFont Awsomeを利用しています。

ということで、これだけの設定で簡単にFont Awsomeを使うことができます。

［Webの豆知識］関連記事

経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください。