Pickupニュース

IcoMoon
Webフォント

IcoMoon

自作のアイコンWebフォントを作成
IcoMoonはWebフォントを自由に組み合わせて最適なフォントファミリーを制作することが出来ます。
このページでは、IcoMoonで提供されている無料のWebアイコンフォントをWebサイトで使用するための設定方法を紹介しています。
1 IcoMoon Free Packの導入

スタイルシートのリンク

IcoMoonはフォント一式と、フォントファミリーの設定を記述したスタイルシートを読み込んで使用します。

リンク先のDownloadをクリックして、ファイルをダウンロードします。

Webサイト

IcoMoonフォルダの作成

IcoMoonという名前のフォルダを新規作成し、そこにダウンロード・解凍後の IcoMoon-Free-masterFont フォルダの中からIcoMoon-Free.ttfを移動します。

スタイルシートの新規作成

IcoMoon-Free-masterFontdemo-files フォルダから、demo.cssファイルを開きます。

158行目のIcoMoon-Free.ttfの読み込みパスを以下のように修正します。
CSSCopy
@font-face { font-family: 'IcoMoon-Free'; src: url('IcoMoon-Free.ttf') format('truetype'); font-weight: normal; font-style: normal; }

156行目の@font-face {から1659行目の }までをコピーして、新しくIconMoon.cssという名前で作成したスタイルシートファイルにペーストし、新規作成したIcoMoonフォルダに保存します。

スタイルシートのリンク

HTMLマークアップ

サーバーに作成したIcoMoonフォルダをアップロードし、<head>タグ内にIcoMoon.cssまでのスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<link rel="stylesheet" href="path/IcoMoon/icoMoon.css">

基本的な使い方

IcoMoonの記述方法

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

1 2

コメントを残す

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

記事ランキング