CodePenでFont Awsomeを使う

CodePen
2019.03.17

こんにちは、ゆんつです。

ブログにHTMLやCSS、JavaScriptのコードと、その実行結果を手軽に表示してくれる「CodePen」というサービスがあります。

ゆんつ
ゆんつ

とても便利なサービスです

このCodePenで「Font Awesome」のアイコンフォントのを使用したい場合。

どのようにしたら良いでしょうか？

今日は

CodePenでFont Awesomeを使う方法

について書きたいと思います。

HTML画面で設定する

CodePenのHTMLのエディタ画面で歯車のマークをクリックします。

HTMLの歯車マークをクリック

すると「Pen Settings」という設定画面になります。

Pen Settings

Pen Settings画面でHTMLを選択し、Stuff for<head>と書かれた部分に部分にFont AwsomeのCDNのURLをコピペします。


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"&gt

コピペした後は忘れずに「Save&Close」ボタンをクリックして設定を保存してください。

つまり、普段自分がHTMLのコードを書く時にheadタグ内に書いているCDNからのFont Awesomeの読み込みを、CodePenの設定画面で行えばいいだけなんです！

ゆんつ
ゆんつ

簡単！

Font Awesomeの設定をして、フォントアイコンのコードをコピペすると

See the Pen
FontAwesome3 by konpure (@yuntu)
on CodePen.

はい、ツイッターの鳥が表示されました！

というわけで、CodePenでFont Awesomeを利用したい場合は

HTMLの設定画面で、Stuff for<head>と書かれた部分に部分にFont AwsomeのCDNのURLコピペする

ことで使えるようになると思います。

それでは、またですー。

コメント