全部入り最強アイコンフォント「CONDENSE-iconFont」でブログデザインが楽になったね - frasm.net

frasm

フラズム
恋と冒険が、僕を大人にしたブログメディア
Update!
    No items.

全部入り最強アイコンフォント「CONDENSE-iconFont」でブログデザインが楽になったね

いやぁ、捗った!

ブログを一つ作るだけでもアイコンってたくさん必要なんですよね。パーツとしてそこにあるだけで、ずいぶんとクオリティーを上げてくれるので、助かる。

のですが、

作るのが面倒なんだよなぁ。

サイトの表示速度のことなんかを考えたらアイコンは「CSSスプライト」させる必要とかもありまして。CSSプリプロセッサーを使わない僕には面倒の局地なんですよね。

Sassで行こう!

Sprite画像でもう悩まない?!SassとCompassで速攻Sprite画像を作る方法に感動! | バンクーバーのうぇぶ屋_

スプライトしたくはないけど、アイコンは欲しいというわがままな僕の為にとしか思えない感じで

CONDENSE-iconFont_

便利すぎるアイコンフォントを使うことにしました。

これは通常の書体としてパソコンで使うことも出来ますし、アップロードしてwebフォントとして使うことも出来る、全部入り優れもの書体です。フリーとかマジスカ!

まずは、アイコンをアイコンフォントで描画するメリットを

  • 画像を作る手間が省ける!
  • 文字として描画されるので、高解像度ディスプレイでも綺麗!
  • CSSを書き換えるだけで訂正修正差し替えが出来る!

と、画像でどうこうするよりも圧倒的に早くて楽で、仕上がりが安定します。

とはいえ、デメリットがないわけではありません。

一般的なアイコンフォントは、RSS等CSSが効かない環境では文字に戻る(爆)

そうです、CSSが効かない場所だと、不自然な文字になります。

アイコンフォントの欠点である意味不明な文字列をリガチャ(合字)で解決したWEBフォント『Ligature Symbols』 | ウェビメモ_

こういう弱点を克服したwebアイコンフォントも存在しますので、お好みでどうぞ。

基本的なアイコンフォントの便利な使い方はこちら。

アイコンフォントでリンクタイプ別にアイコンつける方法 | Webクリエイターボックス_

なんせ、便利です。CSSでどうにでもなりますからね。

オススメの使い方

上で何度も言ってますが、アイコンフォントはCSSで管理する方が圧倒的に楽だし、差し替え等メンテナンスもしやすくなります。

上のリンクのmanaさんのように

疑似要素の「before」をつかって描画するようにして、HTMLに直接書かないほうが絶対にイイです。

あああ、直したい!って思った時にCSSだけ修正する方が楽だし、ミスが減るので。

まとめ

レスポンシブな流れというか、デバイスを選ばず綺麗に描画出来るだけでも、アイコンフォントを使う価値があるというモノですね。

メリットデメリットを理解して、時短しちゃいましょう。

CONDENSE-iconFont_

Ligature Symbols_

-スポンサーリンク-
Follow!

オススメのブログのこと はコレ!

コメントを残す

frasm
Follow!