使う分だけ選択してアイコンフォントをダウンロードすることができるWEBサービス「Fontello」

使う分だけ選択してアイコンフォントをダウンロードすることができるWEBサービス「Fontello」

使う分だけ選択してアイコンフォントをダウンロードすることができるWEBサービス「Fontello」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • Youtube動画変換・ダウンロードおk!
  • このエントリーをはてなブックマークに追加

Fontelloは、使いたいアイコンだけをダウンロードして利用することができるアイコンフォントジェネレーターです。先日、Font Awesomeというアイコンフォント用のフレームワークを紹介しましたが、Fontelloは使う分だけを適用する形になるのでこちらの方が手軽感はあります。

使えるアイコンも豊富で、以下のフォントから選択することが可能になっています。

  • Font Awesome
  • Entypo
  • Typicons
  • Iconic
  • Modern Pictograms
  • Meteocons
  • MFG Labs
  • Maki
  • Zocial
  • Brandico
  • Elusive
  • Linecons
  • Web Symbols

かなりの種類があるので、使いたいアイコンは見つかると思います。

スポンサードリンク

Fontelloを使ってアイコンフォントを利用する手順

以下に紹介するのは、WordPressサイトでアイコンフォントを適用したときの手順になります。WordPress以外でもやり方は同じなので、参考にしていただければと思います。アップロードディレクトリなどは適宜変更してください。

1. Fontelloにアクセスします。
2. 使いたいアイコンを選択します。

使いたいアイコンを選択

3. [Customize Codes]タブをクリックします。

Customize Codes

4. 選択したアイコンに好きな文字を指定します。

アイコンに文字を指定

5. 右上にある[Download webfont]をクリックして、アイコンフォントをダウンロードします。

Download webfonts

6. ダウンロードしたファイルを解凍して、fontフォルダを丸ごとテーマディレクトリにアップロードします。

fontフォルダ

7. cssフォルダにあるfontello.cssの中から以下の部分をスタイルシート(style.css)にコピーします。

fontello.css
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?28535870');
src: url('../font/fontello.eot?28535870#iefix') format('embedded-opentype'),
url('../font/fontello.woff?28535870') format('woff'),
url('../font/fontello.ttf?28535870') format('truetype'),
url('../font/fontello.svg?28535870#fontello') format('svg');
font-weight: normal;
font-style: normal;
}

8. これだとファイルの指定がうまくいかないので、ファイル指定のパスから../を削除します。

style.css
@font-face {
font-family: 'fontello';
src: url('font/fontello.eot?28535870');
src: url('font/fontello.eot?28535870#iefix') format('embedded-opentype'),
url('font/fontello.woff?28535870') format('woff'),
url('font/fontello.ttf?28535870') format('truetype'),
url('font/fontello.svg?28535870#fontello') format('svg');
font-weight: normal;
font-style: normal;
}

9. アイコンフォントを使いたい部分に、以下のようなスタイルを指定します。

style.css
.icon-font{ font-family: "fontello"; }

※例えば、icon-fontというクラスでアイコンを使いたい場合、上記のように指定します。

10. HTML側では、以下のようにクラスを指定して、手順4で指定したテキストを入れます。

HTML
<div class="icon-font">t</div>

今回の場合、tを指定したのはTwitterアイコンなので、以下のようにtはTwitterアイコンに置き換えられます。

Twitterアイコン

SNSのアイコンをアイコンフォントにする

当ブログでもヘッダー部分に表示されるSNSアイコンを画像からアイコンフォントに変えました。参考までに当ブログで変更した内容を紹介させていただきます。

header.php
<div class="sns-icon">
<a title="Twitter" href="https://twitter.com/princessfuture7" target="_blank"><span class="twr-icon">t</span></a>
<a title="Facebook" href="https://www.facebook.com/techmemo.himecas" target="_blank"><span class="fb-icon">f</span></a>
<a title="Google+" href="https://plus.google.com/112233029502687730980" target="_blank"><span class="gplus-icon">g</span></a>
<a title="RSS" href="<?php bloginfo('url'); ?>/feed/"><span class="rss-icon">r</span></a>
<a title="About" href="<?php bloginfo('url'); ?>/about/"><span class="user-icon">u</span></a>
</div>

まず、SNSアイコン用のコードをheader.phpに記述しています。

各アイコンのクラスはa要素に指定してもいいのですが、a:linkに指定している色が優先されてしまったのでspanで指定しています。

style.css
@font-face {
font-family: 'fontello';
src: url('font/fontello.eot?28535870');
src: url('font/fontello.eot?28535870#iefix') format('embedded-opentype'),
url('font/fontello.woff?28535870') format('woff'),
url('font/fontello.ttf?28535870') format('truetype'),
url('font/fontello.svg?28535870#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
.sns-icon{
font-family: "fontello";
font-size:45px;
line-height: 1em;
}
.twr-icon{
color:#44CCF6;
}
.fb-icon{
color:#3B5998;
}
.gplus-icon{
color:#DC4935;
}
.rss-icon{
color:#F88B02;
}
.user-icon{
color:#d4d4d4;
}

style.cssでは、こんな感じでそれぞれのアイコンの色も指定しています。

アイコンフォント

あとがき

文章にすると結構面倒そうに見えますが、実際やってみると非常に簡単です。SNSアイコンなどを画像からアイコンフォントに変えようと思っていた方は、ぜひ試してみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。