こんにちは、ゆんつです。
プログラムのコードと実行結果を手軽に表示してくれるCodePenというサービスがあります。
ブログへの貼り付けも簡単でコードとその結果を表示することがことが出来るので、プログラミングの学習中に覚えたことをブログに書く時に良く使っています。
最近HTMLやCSSの学習の中でFont Awesomeという、アイコンフォントを使うことが増えてきました。
アイコンフォントは画像などと違い画面を拡大しても画質が悪くならないので、ワンポイントデザインに最適です。
このFont AwesomeをCodePenでも使おうと思ったのですが、なかなかやり方がわからず迷ったので備忘録として残しておきます。
標準装備されているわけではない
僕は「CodePenには最初からFont Awesomeの機能が搭載されている」と思い込んでいました。
色々なブログでCodePenでFontAwesomeが使われているのを見たからです。
コードを入力すればアイコンが表示されると思っていたので、ツイッターの鳥のマークを使おうとコードを書いてみると
See the Pen Font Awsome4 by konpure (@yuntu) on CodePen.
全然表示されません。
なんで？
HTML画面で設定してあげればいいだけだった
色々試行錯誤しましたが、解決法はとっても簡単でした。
CodePenの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">
をコピペするだけでした。
コピペした後は忘れずに「Save&Close」ボタンをクリックして設定を保存してください。
つまり普段自分がHTMLのコードを書く時にheadタグ内に書いているCDNからのFontAwesomeの読み込みを、CodePenの設定画面で行えばいいだけなのです。
なーんだ
これにより
はい鳥が表示されました
See the Pen FontAwesome3 by konpure (@yuntu) on CodePen.
解ってしまえばなんてことは無いです
なんてことは無いことですが、検索しても答えを見つけることができなかったので、僕と同じように「CodePenでFont Awsome使いたいけどどうやったらいんだろう？」と迷った人の役に立てばいいなと思います。
それでは、またですー。
コメント