Pickupニュース

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

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

好みのアイコンを選択してアイコンWebフォント作成
ライブラリとして公開されているアイコンの中から選択して、好みのアイコンWebフォントを作成することが出来るWebサービスです。フォントファイルの容量を削減することが出来ます。自分で作成したSVGファイルをインポートして、独自のアイコンWebフォントを作成することも出来ます。
1 IcoMoon Appの基本的な使い方

IcoMoon Appのご利用はこちらから

Webサイト

アイコンセットの追加

初期表示時は、IcoMoonが提供している無料アイコンセットのみが表示されていますが(IcoMoonの無料アイコンセットのみご利用になりたい場合はこちらの記事を参照下さい)、公開されているライブラリから他のアイコンセットを追加することが出来ます。

ライブラリを開く

Icon Libraryか、Add Icons From Library…をクリックして、ライブラリを開きます。

アイコンセットの追加

追加したいアイコンセットのAddをクリックして追加します。
[label]Purchase[/label]となっているアイコンセットは有料です。

アイコンの選択

アイコンセットの中から、アイコンWebフォントとして使用したいアイコンをクリックして選択します。もう一度クリックすると選択が解除されます。

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

選択したアイコンをアイコンWebフォントとして作成します。

アイコンWebフォントの設定

Generate Fontをクリックします。

Preferencesをクリックします。

Font Name(フォント名)、Class Prefix(アイコンクラスの接頭語)、Class Postfix(アイコンクラスの接尾語)を編集します。ここでは例として、Font Nameを「Sample-Icon」、Class Prefixを「sample」としています。Class Prefixは、他のアイコンWebフォントと重複しないように設定します。

アイコンWebフォントのダウンロード

設定が終わったら、DownloadをクリックしてアイコンWebフォントをダウンロードします。

アイコンWebフォントの確認

ダウンロード・解凍したフォルダ内のdemo.htmlを開いて、アイコンWebフォントを確認します。

作成したアイコンWebフォントの使用方法

サーバーに解凍したフォルダをアップロードし、<head>タグ内にフォルダ内のstyle.cssまでのスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<link rel="stylesheet" href="path/{Font Name}/style.css">
Font Nameは今回の例では「Sample-Icon」になります。

基本的な使い方

IcoMoon Appで作成したアイコンWebフォントの記述方法

アイコンを表示したい箇所に以下のような記述を追加します。
IcoMoon Appのアイコン
<span class=”{接頭辞}{アイコン名}”></span>

接頭辞はPreferencesで設定した[label]Class Prefix[/label]です。

1 2

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.

記事ランキング