WEBフォントCONDENSE-iconFontを使ってアイコンボタンを作ってみた

スポンサー

※当サイトではアフィリエイトプログラムを利用して商品を紹介しています。

GIGAZINEさんやLife Hackerさんで取り上げられ、話題になっていますが、大分県で活躍されているデザイン事務所CONDENSEさんから、すばらしいWEBフォントが公開されました。

CONDENSE-iconFont

スマホサイトのボタンを設置する場合、1つずつ画像を作ったり、CSS SpriteでCSSを指定するというのも面倒なときがあります。
そんなときに、このWebフォントを使うと、フォント名を指定し、CSSで飾りをつけるだけで、画像の処理を行わず、アイコンを作ることができます。

ダウンロード

CONDENSE-iconFontのダウンロードはこちらから

í

ライセンス

「営利、非営利問わず自由に使用できます。但し、再配布は禁止しています。」
とのことで、WEB制作にも自由に使えますね。

フォントファイル

ダウンロードしたファイルを解凍すると、
CONDENSEicon.woff
CONDENSEicon.tff
CONDENSEicon.otf
CONDENSEicon.eot

の4つのファイルができます。FTPソフトなどを使って、これらのファイルをサーバーにアップします。

CSSの設定

@font-face規則のfont-familyでWebフォントとして使用するフォントファミリ名を「condenseicon」として定義しました。
そして、文字アイコン用のclass mojiiconを作ってみました。

/*font-face*/
@font-face{
	font-family:'condenseicon';
	src: url('/font/CONDENSEicon.ttf') format('truetype'),url('/font/CONDENSEicon.otf') format('opentype'),url('/font/CONDENSEicon.woff') format('woff');
}

/*フォントの指定*/
.mojiicon{
   font-family:'condenseicon';
  /*以下、ボタンっぽく見せるためのスタイル設定*/
  font-weight:bold;
  font-size:32px;
  background-color:#5ca02f;
  color:#fff;
  border:2px solid #5ca02f;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  padding:5px;
}

CSSだけで、アイコンボタンを作成

上記のCSS設定を使って、以下、アイコンボタンを作成してみました。

A B C D

コメント

タイトルとURLをコピーしました