アイコンフォントの具体的な使い方 - Fontello

アイコンフォントを利用する上で便利なサイト「Fontello - icon font generator」でフォントファイルを作成し、ダウンロードしたフォントファイルからWebページにアイコンを表示するまでの具体的な手順について解説します。

Fontelloには、さまざまなサイトからのアイコンが登録されており、ユーザーが選択したアイコンだけでフォントファイルを作成してくれます。
アイコンの種類は2千種類を超えており、自分で作成したカスタムアイコンもファイルに含めることができます。

【コンテンツ】

  1. アイコンを選択し条件を設定する
  2. フォントファイルをダウンロードする
  3. ダウンロードしたファイルをディレクトリに配置する
  4. CSSをインクルードするlinkタグを記述する
  5. アイコンを表示するためのHTMLコードを確認する
  6. アイコンを表示したい場所にHTMLコードを記述する
  7. アイコンをテキストとして文章に挿入する

アイコンを選択し条件を設定する

下記ページにアクセスし、必要とするアイコンをクリックします。
クリックして選択したアイコンの数は、[Download webfont]の横に表示されます。
http://fontello.com/

アイコン選択画面

次にフォントネームとサイズを指定します。
フォントネームを指定しないときは、デフォルトの"fontello"がフォントネームになります。
ここでは"myfont1"と指定しました。

フォントネームとサイズの指定画面

スパナの形をした設定アイコンをクリックします。
ここで大切なのは、[CSS prefix]の設定です。
デフォルトでは、"icon-"となっていますが、既存で設定しているクラスと重複する可能性があるなら変更します。ここでは"myicon-"と変更してみました。

CSS prefix 設定画面

その他、[Cutomize Names]タブをクリックすると、CSS prefixに続く文字列をアイコンごとに指定することができます。
また、[Cutomize Codes]タブをクリックすると、アイコンごとのクラスに記述するcontentプロパティのコードを指定することができます。
気にしないならデフォルトのままでも問題はないでしょう。

フォントファイルをダウンロードする

[Download webfont(xx)]をクリックして、フォントファイルをダウンロードします。

ダウンロードしたzipファイルを解凍すると、以下のファイルが含まれています。

ダウンロードしたファイルリスト

ファイル 説明
フォントファイル
(.eot/.svg/.ttf/.woff)
4種類のフォーマットのフォントファイルがあります。
CSSファイル 複数のファイルがありますが、メインとなるのは「myfont1.css」です。その他は必要に応じて使います。
LICENSE.txt ライセンス情報を記述したファイルです。
README.txt フォントの使い方や注意点を記述したファイルです。
demo.html ブラウザで表示すると、フォントファイルに含まれているアイコン画像と対応するクラス名が表示されます。
config.json JSON形式のファイルですが今回は使用しません。

ダウンロードしたファイルをディレクトリに配置する

フォントファイル4種類とCSSをサイトのディレクトリに配置します。

配置するディレクトリは任意で構いませんが、HTMLファイル直下の[css]ディレクトリにCSSを置き、[font]ディレクトリにフォントファイルを置くと、CSSは修正なしで使えます。

CSSをインクルードするlinkタグを記述する

Webページのhead要素内に、CSSをインクルードするlinkタグを記述します。

以下は省略があるHTML5の記述です。

アイコンを表示するためのHTMLコードを確認する

アイコンを表示するには、アイコンを表示したい場所のHTML要素にクラスを付与します。

以下のようなフォーマットで記述します。<i>の代わりに<span>を使っても構いません。

上記の[icon名]部分にどのアイコン画像が対応しているか知るには、「demo.html」をブラウザで表示してみます。アイコン画像の横に、クラス名が表示されます。

demo.htmlのブラウザ表示画面

アイコンを表示したい場所にHTMLコードを記述する

基本的な記述方法

例えば、以下のように記述します。

実際の表示は以下になります。

 ハッピースマイル

アイコンの色を変更する

色指定のクラスはデフォルトでは定義されていません。
ここでは以下のようにstyle属性を使って指定してみます。

実際の表示は以下になります。

 ハッピースマイル

アイコンのサイズを変更する

以下のようにstyle属性を使ってサイズを2倍にしてみます。

実際の表示は以下になります。

 ハッピースマイル

アイコンをテキストとして文章に挿入する

アイコンを表示するにはbefore疑似要素を使ったクラスを指定しましたが、テキストとして直接文章内に挿入することもできます。

「demo.html」のページで、[show codes]をクリックして、挿入するUnicodeを確認してください。

Unicode 表示画面

font-familyに"myfont1"を指定し、以下のように記述します。

実際の表示は以下になります。

アイコン    テキスト

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ