I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > CSS > 欲しいアイコンだけ選んでWEBフォント化してくれる便利サイト【Fontello】

欲しいアイコンだけ選んでWEBフォント化してくれる便利サイト【Fontello】

サイト内で使用したいアイコンを選ぶとWEBフォント化してダウンロードできる便利サイトのご紹介です。
複数のアイコンをサイト内で使用したい、でも画像は使いたくない時などに利用できます。

Fontelloとは

20151027.jpg

fontelloサイト

Fontelloサイトは、必要なアイコンのみをWEBフォント化してくれるWEBサイトです。
上記画像のように、WEBフォント化したいアイコンを選択して、自分だけのWEBフォントを生成できます。

ライセンスについて

各WEBフォントにつきライセンスが指定されています。
下図のようにフォントの右側にライセンスが明記されているので、利用可能か適宜確認してください。

fontello01.jpg

たとえば、SILというのはSILオープンフォントライセンスのことで、

  • 基本的にはフォントソフトウェアの複製を入手した誰もが、フォントソフトウェアの改変された複製および改変されていない複製を使用、研究、複製、統合、埋め込み、改変、再配布および販売可能(例外規定はライセンス本文参照)。
  • 本や他の出版物に利用可能。
  • 一般ユーザーのアクセスするWebサイトで利用可能。

ということです。
詳しくはSILオープンフォントライセンスの訳文を確認してください。

Fontello利用準備

  1. まずはFontelloサイト(http://fontello.com/)へ行き、利用したいアイコンをクリックして選択してください。
    fontello02.jpg
  2. 上にあるCustmize Namesタブをクリックします。
    fontello03.jpg
  3. Customize Namesタブでは、アイコンを呼び出すためのクラス名を変更できます。
    基本的にはデフォルトのままでOKかと思います。
    fontello04.jpg
  4. 次に、Customize Codesタブをクリックしてください。
    fontello05.jpg
  5. Customize Codesでは、各アイコンを呼び出すための文字を指定することができます。
    アイコンの上部にアイコンを呼び出すための文字入力してください。
    なお、アイコン下部はアイコンを呼び出すためのユニコードになります。
    fontello06.jpg
  6. 右上にあるダウンロードボタンをクリックしてください。
    fontello07.jpg
  7. ダウンロードしたZIPファイルを解凍すると、下図のようになっています。
    必要なのは、[cssフォルダ]と[gontフォルダ]です。
    fontello08.jpg

  8. [cssフォルダ]を開き、fontello.cssをサイト内の任意の場所([cssフォルダ]など)にコピーして下さい。
    fontello09.jpg
  9. [fontフォルダ]もサイト内の任意の場所([cssフォルダ]など)にコピーしてください。
    fontello10.jpg
  10. (8)でコピーしたfontello.cssの3行目~7行目のfontello.cssをエディタで開き、アドレスを(9)で移動した[fontフォルダ]を呼び出せるように修正してください。
    fontello11.jpg
  11. 準備完了です。
    HTMLソース内でアイコンを呼び出してください。

fontello利用方法

準備の完了したアイコンをHTML画面上に呼び出すには、2つの方法があります。

クラスを指定する方法

準備の(3)で設定しているクラスを指定して、アイコンを呼び出します。
例えば、「icon-home」というクラスの設定されているアイコンを呼び出すには、下記のようにします。

<i class="icon-home"></i>
font-familyを指定する方法

準備の(5)で設定している文字にfont-familyを指定して、アイコンを呼び出します。
例えば、「h」という文字を割り当てているアイコンを呼び出すには、下記のようにします。

【HTML例】

<span class="fontello">h</span>

【CSS例】

.fontello{
    font-family: "fontello"
}

記事移動

関連記事

iphone の safari でアドレスバーや標準メニューが消えない時に確認した方がいいCSSの設定

【CSS3】word-wrap:break-word;とword-break:break-allで文字を折り返して表示する方法

pixiv小説のように縦書きの文章の中でCSSで縦中横に表示してみる。

pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。

WEBデザイナー必見!CSSジェネレータ集

CSS3でマウスオン(:hover)時に画像を拡大・縮小する方法

Comment Form

  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

Feed