1行コピペするだけ。カラーミーショップでFont Awesomeを使う方法。

お役に立ったらポチッとお願いします

先日cssの:befor / :afterでfont awesomeのフォントを使う方法を書いたところ「カラーミーショップ Font Awesome」のキーワードでいらっしゃる方が多かったので、意外とそこで躓いてるひとが多いのかな?ということでカラーミーショップでFont Awesomeを使う方法をご紹介します。

超簡単なので、あまりコードに慣れてなくても大丈夫!

忘れがち!cssの:befor / :afterでfont awesomeのフォントを使う方法。
cssいじってますか?おおつか( @otkizm )です。 基本的なものは覚えていても、意外と忘れがちなのが『まれによくある』ケース。あれ…前にやったのは覚えてるけど…どうやるんだったけ?なんて…
スポンサーリンク

1行コピペするだけ!

CDNを使えば、たぶんあっけにとられちゃうほど簡単です。

CDNとは

コンテンツデリバリネットワーク(Contents Delivery Network, CDN)とは、Webコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。

コンテンツデリバリネットワーク – Wikipedia

逆によくわからんよ!となりそうですが、今回の場合は「自前のサーバーにファイルを置かず、専用のサーバーから読み込む」ということです。説明が下手なので更にわからなくなってしまったらゴメンナサイw

まずはコピー。

Font AwesomeのGet Startedのページに行き、すこーしスクロールすると「EASIEST: BootstrapCDN by MaxCDN」の見出しがあります。イージエスト!最も簡単な!

ほんで画像の○で囲った部分をコピーします。
fontawesome-cdn

Font Awesomeに行くのも面倒なあなたは以下をコピーしてもOK。

そしてペースト。

コピーしたらカラーミーショップにログイン、「集客」→「検索エンジン対策」に進みます。ページの下の方に「headタグ内フリースペース設定」という見出しのテキストボックスを見つけてください。

colorme-dashboard

ここにさっきコピーした一行をペーストします。以上!
これ以外することはなにもありません!

※CDNを使うことの是非については今回は触れません。また、フォントファイルをダウンロードして使う方法は試したことがないので割愛します。

Font Awesomeアイコンを表示する方法

ついでにFont Awesomeのアイコンを表示する方法をさらっと。簡単なので覚えちゃいましょう。

<i>fa fa-○○のクラスをつけるだけです。

他にも…

icon-android icon-android icon-android
サイズ変えたり

icon-spinner
くるくる回したり

icon-twitter-square icon-twitter-square icon-twitter-square
向きを変えたり

などなど、Font Awesome Examplesにはいろいろな表示方法が載っているのでチェックしてみてくださいね!

スポンサーリンク

お役に立ったらポチッとお願いします

おおつかをフォローしてみる

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です