snsやブログサービスで使われてるロゴのアイコンフォント

ツイッター、フェイスブック、Google+などのSNSや、ワードプレスなどのブログサービスで使用されているロゴは、アイコンフォントを利用する事で全く同じものが作れます。 今回は無料オンラインサービスのアイコンフォント・ジェネレーター「Fontello」を使ったsnsアイコンの作り方を紹介します。

ちなみにこんな感じのアイコンフォントが作れますよ!

snsアイコンフォント完成イメージ

Fontelloでアイコンフォントを作ろう

アイコンフォントを選ぶ

まずはFontelloにアクセスしてアイコンフォントを選びます。

SNSやブログサービスのアイコンはTwitter、Facebook、Google+.YouTube、Instagram、Pinterest、はてぶ、ワードプレスなどがあります。 他にもYoutubeやスカイプのアイコンなどもあって種類は結構豊富です(上記画像のアイコン以外にも色々あります)

使いたいアイコンが見つかったら、アイコンをクリックして選択します。

アイコンのサイズを指定

次にアイコンのサイズを指定します。

右上のスライダで最大30pxまで大きく表示することができます。

アイコンの名前を指定

次にアイコンの名前を指定します。 ここでは、「font11」と付けましたが、名前を指定しない場合は「fontello」がデフォルトの名前となります。

CSS prefixの設定

そして横のスパナのマークのアイコンをクリックします。 そうすると「CSS prefix」が設定できます。

デフォルトでは「icon-」となっていますが、これはアイコンフォントを使用する予定のブログやホームページのCSSのclass(クラス属性)と重複するなら変更します。 (よくわからない場合は無視して下さい)

その他の設定

他にも「Cutomize Codes」をクリックすると、アイコンフォントに割り当てる文字(contentプロパティのコード)を指定できます。 「Cutomize Names」では、CSS prefixに続く文字列をアイコンごとに指定する事もできますが、どちらも気にならない、もしくはよくわからない場合は無視して下さい。

アイコンフォントをダウンロードする

アイコンフォントをダウンロードする

必要なアイコンが選択できたら、「Download webfont」をクリックします。 そうすると選択したアイコンのセット(フォントデータ)がダウンロードされます。

ダウンロードされたファイル
ファイル 説明
cssファイル 数種類ありますが、利用するのは「font11(デフォルトではfontello)」となります。
※先ほど付けた名前がファイル名となっています。名前を付けてない場合(デフォルトでは)「fontello」となります。
fontファイル フォントファイル
config.json 使用しません
demo.html クリックするとダウンロードしたアイコンのデモが見れます。
LICENSE.txt ライセンス情報
README.txt 使い方など

アイコンフォントの使い方

ダウンロードしたアイコンフォントをホームページやWordpressで使用する方法を紹介します。 まずはWordpressで使用する場合から紹介してきますね。

WordPressの場合

まずはダウンロードしたファイル(上記の場合「fontello-48db762c」)を解凍して、テーマフォルダ直下に置きます。 そしてheader.phpテンプレート内の<head>~</head>内に下記を記述し、cssファイルを呼び出します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/fontello-4312da93/css/font11.css">

※よくわからない場合は、何も考えずにダウンロードした圧縮されてるzipファイルをダブルクリック。中にフォルダが1つだけ入っているのでそれを右クリックして切り取り、デスクトップに貼り付けて、ffftpを開いて、貼り付けたフォルダをテーマフォルダ内(テーマフォルダ内にある他のフォルダの中には入れないで下さい)に入れて下さい。

「fontello-4312da93」の部分にはダウンロードしたフォルダ名を、「font11」の部分には最初に付けた名前(デフォルトの場合fontello)を記述して下さい。

子テーマで使用する場合

WordPressの子テーマで使う場合は、下記のように記述します。 「fontello-4312da93」と「font11」の部分は上記と同じように書き換えて下さい。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/fontello-4312da93/css/font11.css">

ホームページで使う場合

普通のホームページの場合は、配置するディレクトリは任意で構いません。(よくわからない場合は、HTMLファイルと同じ場所にダウンロードしたフォルダごと配置して下さい。)

※配置するには、ffftpなどのソフト(無料)が必要です

HTMLファイルの<head>~</head>内に下記を記述し、cssファイルを呼び出します。

※下記はHTMLファイルと同じ場所にダウンロードしたフォルダを配置した場合

<link rel="stylesheet" href="fontello-4312da93/css/font11.css">

「fontello-4312da93」の部分にはダウンロードしたフォルダ名を、「font11」の部分には最初に付けた名前(デフォルトの場合fontello)を記述して下さい。

アイコンを表示するためのHTMLを記入

demoページに表示されるclass名

アイコンフォントを表示するためには、アイコンを表示したい要素(h1やpなど)にclass(クラス属性)を付けてあげます。 例えばこのページで行ってきた設定なら下記のようになります。

<i class="icon-facebook-rect"></i>

<!-- 上記ならフェイスブックのアイコンが表示される -->

class="icon-facebook-rect"となっていますが、「icon」の部分には「CSS prefix」で設定した文字列が入ります。 ここでは「CSS prefix」は変更していませんので、デフォルトの「icon」となります。

「facebook-rect」の部分ですが、ここにはicon名が入ります。 各アイコンフォントのclass名はダウンロードしたフォルダ内にある「demo.html」で見る事ができます。

「demo.html」をダブルクリックしてみて下さい。 アイコンフォントの横にclass名が表示されています。

例えばリスト表示してアイコンを並べたい場合は下記のように記述します。

<ul>
  <li class="icon-facebook-rect"></li>
  <li class="icon-googleplus"></li>
  <li class="icon-instagram"></li>
  <li class="icon-wordpress"></li>
  <li class="icon-path"></li>
  <li class="icon-vkontakte-rect"></li>
</ul>
<div style="clear:both;"></div>

ですがこの状態だと通常の文字の色と大きさで表示されてしまいます。

スタイルを指定していない状態

スタイルを指定

まずは見栄えを整えるためにロゴの色とかは変えず、アイコンフォントを横並びにしてみます。

li{
  float: left;
  list-style: none;
  margin-right: 5px;
  font-size:45px;
}
横並びにした状態のアイコンフォント

次にアイコンフォントに色を付けてみます。 snsやブログサービスで使われているロゴのような色にしてみます。

li{
  float: left;
  list-style: none;
  margin-right: 5px;
  font-size:45px;
}

/* ロゴの色 */
li.icon-facebook-rect:before {color: #3B67A6;}
li.icon-googleplus:before {color: #DB4437;}
li.icon-instagram:before {color: #333;}
li.icon-wordpress:before {color: #21759B;}
li.icon-path:before {color: #BD2125;}
li.icon-vkontakte-rect:before {color: #00A4DE;}
snsやブログサービスの色を指定したアイコンフォント

ロゴの横に文字を入れる

アイコンフォントは:before疑似要素contentプロパティで生成しています。 そのためテキストの前にアイコンフォントを挿入する事も可能です。 例えばテキストの前にsnsなどのロゴを入れたい場合は下記のようにします。

<ul class="sample">
<li class="icon-pocket">pocket</li>
<li class="icon-facebook">facebook</li>
<li class="icon-twitter">twitter</li>
<li class="icon-youtube">youtube</li>
<li class="icon-pinterest">pinterest</li>
<li class="icon-gplus">google+</li>
</ul>
<div style="clear:both;"></div>
.sample li{
  float: left;
  list-style: none;
  margin-right: 5px;
  padding:2px 5px 0px;
  font-size: 15px;
  font-family: 'Shruti',serif;
  color: #fff;
}
.sample li.icon-pocket {background: #EF3E56;}
.sample li.icon-facebook {background: #3B579D;}
.sample li.icon-twitter {background: #00ABF0;}
.sample li.icon-youtube {background: #F32525;}
.sample li.icon-pinterest {background: #BD2125;}
.sample li.icon-gplus {background: #DC4E41;}

.sample li.icon-pocket:before,
.sample li.icon-twitter:before,
.sample li.icon-pinterest:before, 
.sample li.icon-gplus:before {margin-right: 7px;}
.sample li.icon-youtube:before {margin-right: 5px;}

.sample li:before{color: #fff;}
テキストを挿入しボタン風にしたアイコンフォント

こんな感じでテキストの前にロゴを配置して、ボタン風にすることもできます。

※適当に作ったので、細かい調整は修正お願いします。

アイコンをテキストとして挿入する

アイコンフォントのUnicodeを表示

アイコンを表示するには疑似要素を使っていましたが、テキストとして直接文章に挿入することもできます。

「demo.html」のページで、「show codes」をクリックして下さい。 そうすると各アイコンのUnicodeが表示されます。

そして下記のように「font-family」にfont11を指定し、Unicodeを記述します。 (先頭に「&#」、最後に「;」を付けて、コードの先頭にある0は記述しないで下さい)

<p>テキスト<span style="font-family: font11;">&#xe803; &#xe802; &#xe801; &#xe800;</span>テキスト</p>
テキストにアイコンフォントを挿入した表示例

まとめ

こんな感じでsnsやブログサービスのアイコンフォントを作る事ができます。 ちなみにpocketやPinterestのアイコンはあんまり見かけないので、結構役立ったりますよ。

それとsnsやwebサービス以外のアイコンもかなりの種類あるので、良ければ使って見て下さいね(^^♪