• RSS

アイコンフォントが手軽に使える「IcoMoon」の使い方

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

WEBサービスのモックアップ作成などでもお世話になる事が多いアイコンフォント。

今回は、数も種類も非常に豊富なアイコンの中から、自分が好きなモノを選んでダウンロードできる「IcoMoon」というサービスについて、その使い方と簡単なカスタマイズについて紹介させていただきます。

IcoMoon にアクセス

以下のページからIcoMoon へアクセスします。
IcoMoon


IcoMoon の取扱アイコン

IcoMoonページ上部の「IconMoon App」ボタンをクリックします。
アイコンフォントが手軽に使える「IcoMoon」の使い方

WEBサービスでもよく使いそうなアイコンが多数掲載されています。

一部になりますが、ざっとこんな感じ↓

IconMoon Free

アイコンフォントが手軽に使える「IcoMoon」の使い方

Linecons

アイコンフォントが手軽に使える「IcoMoon」の使い方

Eighty Shades

アイコンフォントが手軽に使える「IcoMoon」の使い方

Entypo

アイコンフォントが手軽に使える「IcoMoon」の使い方

IcoMoon の使い方

使いたいアイコンをクリックして、
アイコンフォントが手軽に使える「IcoMoon」の使い方

ページ下部の「Font」ボタンをクリックします。
アイコンフォントが手軽に使える「IcoMoon」の使い方

確認ページへ遷移しますので、同じくページ下部にある「Download」ボタンをクリックします。
アイコンフォントが手軽に使える「IcoMoon」の使い方

icomoon フォルダ内の構成

ダウンロードした icomoon.zip を解凍すると、中身はこのようになっています。
アイコンフォントが手軽に使える「IcoMoon」の使い方

アイコンフォントを表示させるのに必要なファイルは、
style.css と、fonts フォルダ内の4つのフォントファイルです。

style.css

下記ソースコードの26 〜43 行目に、IcoMoon ページで選択したアイコンが指定されます。
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?puuh3p');
src:url('fonts/icomoon.eot?#iefixpuuh3p') format('embedded-opentype'),
url('fonts/icomoon.woff?puuh3p') format('woff'),
url('fonts/icomoon.ttf?puuh3p') format('truetype'),
url('fonts/icomoon.svg?puuh3p#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-home:before {
content: "\e600";
}
.icon-pencil:before {
content: "\e601";
}
.icon-play:before {
content: "\e602";
}
.icon-connection:before {
content: "\e603";
}
.icon-file:before {
content: "\e604";
}
.icon-copy:before {
content: "\e605";
}


fonts フォルダ

以下4 つのフォントファイルを全てアップしないと、環境によってはアイコンが表示されない場合があります。
icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff


HTML 側の記述

アイコンフォントを表示させたい場所に、以下のような記述を行います。
<span class="icon icon-home"></span>
<span class="icon icon-pencil"></span>
<span class="icon icon-play"></span>
<span class="icon icon-connection"></span>
<span class="icon icon-file"></span>
<span class="icon icon-copy"></span>

試しにアイコンを表示してみましょう。
          


アイコンのカスタマイズ

style.css を編集して、アイコンの色やサイズを変更することも可能です。
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/*カスタマイズ*/
color:#dd0000;
font-size:300%
11 – 12行目に、アイコンの色とサイズを指定しました。

こんな感じで表示されますので、サイトに合わせてカスタマイズしてみてください。
          



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す