【Webフォント導入】好きなアイコンだけを選んで使えるicomoonの使い方

 2014/08/17

icomoon0

最近はアイコンフォントを使ったサイトを多く見かけるようになりましたね。最初アイコンフォントの存在を知らなかったため、普通に画像を使ったサイトだと思っていたことはナイショにしておきます。

ファッションの流行には乗れていない私ですが、WEBの流行には乗っかろうと目論み当ブログにもアイコンフォントを入れてみました。

スポンサーリンク

icomoonをWordPressに導入の手順

欲しいアイコンを選ぶ!

https://icomoon.io/app/

まずはicomoonの下記のページで使いたいアイコンを選びます。

IcoMoon App – Icon Font & SVG Generator

このページに欲しいアイコンがみつからなければもっと追加することが出来ます。ページを下にスクロールしていき左下に出ている【Add Icons From Library…】をクリック。

icomoom1

気になる絵柄があれば【Remove】をクリック。そうするとアイコンの追加画面に切り替わり、その種類の絵柄が追加されます。

icomoon2

ATTENTION

ほとんど無料ですがいくつか有料のも混ざっています。有料のを選ぶとアイコンセレクト画面ではなく『お金払ってね』的な画面に切り替わりますのですぐわかるかと思います。

また、絵柄ごとにライセンスが異なります。Removeボタンすぐ上のライセンスで確認してください。英語の説明ですが、翻訳サイトを使うとなんとなく意味が分かります。

欲しい画像がみつからなかったら・・・

上記のところにも欲しいアイコンが見つけられなかった場合、icomoonは自作のアイコンやフリーのSVGアイコンなどもWEBフォント化することが出来るのです。WEBフォント化にすることができるのはSVG形式の画像です。SVG形式の画像はIllustratorなどで作成することができますが、探せば無料で利用できるサイトもたくさんあります。

2014年、無料で商用利用できる最新フリーアイコン素材のまとめ

これらを組み合わせれば、さすがに好みの画像をみつけることが出来そうですね

SVGアイコンは【Import Icons】からインポートさせます。そうするとアイコンのセレクト画面にインポートしたアイコンが追加されるのです。

icomoon3

使いたいアイコンを選んだら【Font】をクリック。

icomoon4

アイコンの名前はそのままclass名になります。自分の好きなように変更することも出来ますのでそこはお好みで。
変更が終わったら【ダウンロード】をクリック。

icomoon5

zipファイルがダウンロードされますので、解凍後ファイルを開き【fonts】というファイルをアイコンフォントを使いたいテーマのStyle.cssと同じ階層へFTPソフトでアップロードします。

icomoon6

次にダウンロードしたicomoonのファイルの中のstyle.cssファイルを開きます。

@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-gt222');
src:url('fonts/icomoon.eot?#iefix-gt222') format('embedded-opentype'),
url('fonts/icomoon.woff?-gt222') format('woff'),
url('fonts/icomoon.ttf?-gt222') format('truetype'),
url('fonts/icomoon.svg?-gt222v#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-warning:before {
content: "\e600";
}
.icon-gift:before {
content: "\e601";
}
.icon-home:before {
content: "\e602";
}
~以下略~

これをそのままWordPressのテーマのstyle.cssにコピペします。コピペ後、相対パスを変更します。

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

(‘./fonts/icomoon~のようにfontsのまえに【./】を追加してください。

MEMO

アイコンの数が多いようでしたらicomoonのstyle.cssも外部cssファイルとしても問題ありません。その際上記相対パスは変更の必要はありません。またstyle.cssのファイル名の変更をお忘れなく!上書きされますよー

icomoonの使い方

アイコンフォントはフォントと同じ扱いなので、フォントのようにサイズや色など好きなように変えることが出来ます。

自分の選んだフォントを確認したい場合は、icomoonのダウンロードしたファイルのなかに【demo】というファイルで確かめることが出来ます。

アイコンフォントをHTMLで使う

まずWordPressでいうと投稿や固定ページ等HTMLの画面で表示するやり方です。

<span class="icon-に続く英単語"></span>

これで簡単に表示することが出来ます。icon-に続く英単語英単語の部分は【demo】というファイルで確認できます。

spanタグなのでそのままstyleを指定することもできます。

<span class="icon-twitter" style="color:#4dccf5"></span>

フォントと同じなので拡大してもクッキリ見えます。投稿ページや固定ページ、phpファイルで使うときはこのように記載します。

アイコンフォントをcssで使う

cssとしてデザインに組み込むことも出来ます。見出しのデザインとして使ったり、リストの頭に付けたりといろいろ使い道はありそうですね。

このリンクの頭にhttp://shufulife.com/にこのアイコンフォントを表示する場合の例

 a:before{ 
content: "\e60f"; 
font-family: "icomoon",sans-serif;
padding-right:10px;
padding-left:5px
}

content: “\e60f”この部分の英数字はDEMOファイルにて確認し好きなアイコンの文字を入力。font-familyはそのまま、 padding部分はデザインに合わせて調整してください。

これはあくまでも例です。これをコピペするとサイトのaタグ全体にマークが付いてしまいます!classやidなど割り当ててやってみてくださいね。

http://shufulife.com/

まとめ

いろんなアイコンフォントを使えるサービスは出ていますが、icomoonは自分でオリジナルのフォントが簡単に作れるのでオリジナリティーを重視した方に向いていると思います。

こちらでも使わせてもらっているテーマSTINGER5には「FontAwesome」があらかじめ搭載されていたので、重複しないよう気を付けてください。

それでは、ちゅんこ@shufulifeがお送りしましたー!

WordPress

Please comment!

  

Messege




現在トラックバックはありません。