ホーム >  HTML・CSS >  WEBサービスロゴのアイコンフォントを使う


Posted:2015/04/13 9:00:58 AM|Category : HTML・CSS

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

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

完成イメージ
css0028
css0029
css0030

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フォントアイコンを使うと以下のようなメリットがあります。

  • 修正が簡単
  • いくらでも大きくできる
  • Retinaディスプレイにも問題無く表示
  • CSSでサイズ・色も簡単に制御可能
  • CSS3でリッチな表現も簡単

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

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

①IcoMoonを開きます。
IcoMoon

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

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

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

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

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

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

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

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

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

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

③HTMLへ記述します。
css0027

<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に以下を記述します。
css0028

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に以下を記述します。
css0029

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}

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

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}

トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告