MENU
  1. ホーム
  2. ブログ・サイトの作り方
  3. 【フリー】ブログ内のアイコンを設定する方法【Font Awesome】

【フリー】ブログ内のアイコンを設定する方法【Font Awesome】

ブログ・サイトの作り方
アイキャチ２１

ブログ作りって楽しいですよね。センスが問われます。笑

そして私はセンスがないです！！

そんな私でも、ブログをちょっとおしゃれにバージョンアップできた方法をご紹介します。

具体的に言うとこの部分！

１例

ナビゲーションバーに私は使っていますが、本文やその他どこでも使えるのでおすすめです。

 

この記事のおすすめな人

  • これからブログを始める人
  • ブログをオシャンティにしたい人
  • ブログに個性を出したい人

 

目次

活用しようFont Awesome！！

Font Awesomeはご存知でしょうか？？

Font Awesomeはブログやサイト上でよく使われるであろうアイコンを「文字」として使うことができるツールです。

色や大きさなど様々簡単に変更ができます。

 これも”文字”です。

     

 

具体的に私のブログではこのようについ買ってます。

＜Before＞

２before

＜After＞

３after

どっちがいいです？

Afterでしょう？そうでしょう？？？？（圧）

 

 

[temp id=2]

Font Awesomeの導入方法

簡単に導入できるのでおすすめです♪

下記の３パターンに分けて導入方法をご紹介します。

※初心者向けの導入方法です。

  1. WordPress（テーマ：Cocoon）を使っている人
  2. WordPressを使っている人
  3. WordPressを使っていない人

 

 

WordPress（テーマ：Cocoon）を使っている人

…無しです。

実は…cocoonを使っている人はすでに、導入されており使える状態なのです！！！

知ってました？笑

 

Cocoon設定 → 「全体」タブ　→ 　サイトアイコンフォント

ほら。ありました。笑

４cocoon

 

WordPressを使っている人

プラグインで導入しましょう。

「Font Awesome」でプラグインを検索

今すぐインストール　→ 　有効化

５プラグイン

終わり。笑

 

一応、設定を確認すると…下記の通りになっています。

６プラグイン２

 

※有料版を使いたい場合はここの設定を変更しましょう。

 

WordPressを使っていない人

CDNを活用しましょう。

CDNとはContent Delivery Networkの略で、要は外のサーバーにデータを置いておくのでそれを使ってください。と言うものです。

 

つまり、インターネットに繋がっていない環境では使えないと言うことですね。

（あまりないかもしれないですが…ネットに繋がっていないローカル環境でテストしても表示されません）

 

下記の公式サイトにアクセスし、メールアドレスの登録を行います。

あわせて読みたい
Get Started instantly With 1,000+ Free Icons | Font Awesome Get vector icons and social logos on your website with the web's most popular icon set and toolkit. Always open source and free for commercial use.

 

アカウントにログインした状態で下記にアクセスをします。

あわせて読みたい
Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

 

７cdn

上記のリンクをコピーして、<head>～</head>内に link タグを記述して読み込みます。

[temp id=2]

Font Awesomeの使い方

順番に実際に利用する方法を記載していきます。

 

①公式ページの上部にある検索バーに欲しいものを入力します。

※英語で検索してくださいね。

 

②画面左側「Free」をクリックすると無料で利用できるものに絞られます。

③次に、使いたいアイコンフォントをクリックします。

９検索結果

 

④上部に表示されている<i>タグをコピーしましょう。

　例）<i class=”fas fa-envelope”></i>

１０選択

 

 

⑤コピーした<i>タグのソースをテキストエディタに貼り付けましょう。

１１テキストエディタ

 

⑥こんな感じになります！！（ちっさ）

１２サンプル

 

＜重要＞

WordPressはダグ内に何もないものは削除すると言う標準機能を備えています。

<i class=”fas fa-envelope”>&nbsp;</i>

間に&nbsp;を入れるようにしましょう。

[temp id=2]

Font Awesomeのカスタマイズ方法

カスタマイズ例をご紹介します。

デフォルトは下記の形式で用意されています。

<i class=“xxx　アイコンの種類></i>

カスタマイズしたい時は

<i class=“xxx　アイコンの種類　カスタマイズ内容></i>

と、カスタマイズしたい内容をスペースを入れて追記します。

 

詳細は下記の公式ページをご参照ください

あわせて読みたい
500 - Internal Server Error | Font Awesome 500 - Internal Server Error

 

アイコンのサイズを変える

<i class=”fas fa-envelope fa-xs”></i>

<i class=”fas fa-envelope fa-sm”></i>

<i class=”fas fa-envelope fa-lg”></i>

<i class=”fas fa-envelope fa-2x”></i>

<i class=”fas fa-envelope fa-3x”></i>

<i class=”fas fa-envelope fa-5x”></i>

<i class=”fas fa-envelope fa-7x”></i>

<i class=”fas fa-envelope fa-10x”></i>

        

アイコンを傾ける

<div class=”fa-4x”>

  <i class=”fas fa-envelope”>&nbsp;</i>

  <i class=”fas fa-envelope fa-rotate-90″></i>

  <i class=”fas fa-envelope fa-rotate-180″></i>

  <i class=”fas fa-envelope fa-rotate-270″></i>

  <i class=”fas fa-envelope fa-flip-horizontal”></i>

  <i class=”fas fa-envelope fa-flip-vertical”></i>

  <i class=”fas fa-envelope fa-flip-both”></i>

</div>

 

     

アイコンを回転させる

<div class=”fa-3x”>

  <i class=”fas fa-spinner fa-spin”>&nbsp;</i>

  <i class=”fas fa-circle-notch fa-spin”>&nbsp;</i>

  <i class=”fas fa-sync fa-spin”>&nbsp;</i>

  <i class=”fas fa-cog fa-spin”>&nbsp;</i>

  <i class=”fas fa-spinner fa-pulse”>&nbsp;</i>

  <i class=”fas fa-stroopwafel fa-spin”>&nbsp;</i>

</div>

 

    

 

 

カスタマイズの参考書

文字フォントはCSSで簡単に装飾が可能です。

例えば…赤に変えたりも簡単（style=”color:red;”を追加）

 

CSSの知識をつければもっと幅が広がります！


まとめ

Font Awesome最高。

ナビゲーションバーへの反映方法などはまた別の記事を作成予定です。

ブログ・サイトの作り方
アイキャチ２１

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
目次