WEBサービスロゴのアイコンフォントを使う

よく利用されているWEBサービスのアイコンフォントの使い方を紹介します。

完成イメージ

Webフォントアイコンとは

Webフォントアイコンは、画像を使わなくてもフォントとしてアイコンを表示できるフォントです。Font Awesomeが最も使われています。Font Awesomeには、多くのウェブアイコンフォントがあります。WEBサービスのロゴアイコンも多数揃っています。
→Font Awesome

※注意

Font Awesomeは海外で制作されているものです。
海外でよく利用されているWEBサービスロゴはありますが、日本で使われているサービスロゴはありません。

例）
ある　→　Twitter、Facebook、Google＋．YouTube、Tumblr
ない　→　feedly、はてブ、ポケット、LINE
ないフォントは、自前で作るしかありません。

LINEアイコンフォントの入手先

LINEアイコンなどのフォントファイルは、さわさわさんが運営されてるドウラクに公開してあります。
→ドウラク
ドウラクは、feedly、はてブ、ポケット、LINEのSVGファイルを利用自由で配布されています。

Webフォントアイコンを使うメリット

Webフォントアイコンを使うと以下のようなメリットがあります。

IcoMoonでWebフォントアイコンの作成

feedly、はてブ、ポケット、LINEの素材はドウラクで取得します。
その他のものはIcoMoonに最初からあるものを使用します。
IcoMoonのジェネレータでWebフォントアイコンを作成します。

①IcoMoonを開きます。
→IcoMoon

②LINEなど、別途ダウンロードしたSVGファイルがある場合、「importicos」ボタンからアップロードします。

アップロードすると、すぐ下の「Untitled Set」にアップロードしたものが表示されます。

③「Untitled Set」でアップロードしたアイコンをクリックして選択します。

④「IcoMoon　-Free」から、使いたいアイコンをクリックして選択します。

⑤ブラウザ下に表示される「Generate Font」をクリックします。

⑥「Download」ボタンを押してアイコンフォントファイルをダウンロードします。

WordPressにWebフォントアイコンを実装

①ダウンロードした「icomoon.zip」ファイルを解凍し、wordpressテーマフォルダの直下に配置します。

②header.phpテンプレート内のheadタグ内に以下のよう記述します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/icomoon/style.css">

③HTMLへ記述します。

<ul class="web-logo-font">
  <li class="twitter-btn-icon">
    <a href="#" class="twitter-btn-icon-link"><span class="icon-twitter"></span></a>
  </li>
  <li class="facebook-btn-icon">
    <a href="#" class="facebook-btn-icon-link"><span class="icon-facebook"></span></a>
  </li>
  <li class="google-plus-btn-icon">
    <a href="#" class="google-plus-btn-icon-link"><span class="icon-google-plus"></span></a>
  </li>
  <li class="hatebu-btn-icon">
    <a href="#" class="hatebu-btn-icon-link"><span class="icon-hatebu"></span></a>
  </li>
  <li class="pocket-btn-icon">
    <a href="#" class="pocket-btn-icon-link"><span class="icon-pocket"></a>
  </li>
  <li class="line-btn-icon">
    <a href="#" class="line-btn-icon-link"><span class="icon-line"></a>
  </li>
  <li class="feedly-btn-icon">
    <a href="#" class="feedly-btn-icon-link"><span class="icon-feedly"></a>
  </li>
</ul>

④ロゴを横並びに表示します。style.cssに以下を記述します。

ul.web-logo-font {
  padding: 0;
  font-family: sans-serif;
}

ul.web-logo-font li {
  float: left;
  list-style-type: none;
  margin-right: 5px;
  padding-right: 5px;
}

ul.web-logo-font li a{
  font-size: 40px;
  text-decoration: none;
  color: #000;
}

ul.web-logo-font li a:hover{
  opacity: 0.6;
}

⑤フォントに色をつけます。style.cssに以下を記述します。

ul.web-logo-font a.twitter-btn-icon-link{color:#55ACEE;}
ul.web-logo-font a.facebook-btn-icon-link{color:#3C5A99;}
ul.web-logo-font a.google-plus-btn-icon-link{color:#DD4B39;}
ul.web-logo-font a.hatebu-btn-icon-link{color:#3C7DD1;}
ul.web-logo-font a.pocket-btn-icon-link{color:#EE4257;}
ul.web-logo-font a.line-btn-icon-link{color:#00C300;}
ul.web-logo-font a.feedly-btn-icon-link{color:#2BB24C}

⑥角丸のスクエア型にするには、⑤の記述を消して以下のようにします。

ul.web-logo-font li a{
  color: white;
  padding: 7px;
  border-radius: 5px;
}

ul.web-logo-font a.twitter-btn-icon-link{background-color:#55ACEE;}
ul.web-logo-font a.facebook-btn-icon-link{background-color:#3C5A99;}
ul.web-logo-font a.google-plus-btn-icon-link{background-color:#DD4B39;}
ul.web-logo-font a.hatebu-btn-icon-link{background-color:#3C7DD1;}
ul.web-logo-font a.pocket-btn-icon-link{background-color:#EE4257;}
ul.web-logo-font a.line-btn-icon-link{background-color:#00C300;}
ul.web-logo-font a.feedly-btn-icon-link{background-color:#2BB24C}