css splite用の1枚画像とそれに対応するCSSを作成するperl スクリプト

最新記事はこちら




まず、
famfamのアイコンから、
自分が使いたいアイコンをピックアップ、
設定ファイル(16x16_icons.tsv)を作成

以下のようにスクリプトを起動
cat 16x16_icons.tsv | ./get_icons.pl -css=icons.css

これで、設定ファイルのURLからアイコンがダウンロードされ、
1枚画像とCSS(icons.css)を作成される。

使い方は、icons.cssとicons.pngを同一ディレクトリにおいて、
HTMLからicons.cssを読み込んで、
<p>OK<span class="icon cart"></span>OK</p>

と、spanタグにクラス名を指定すればOK
# icon に続いて、表示したいアイコン名を設定する。アイコン名は設定ファイルで設定した名前

githubにあるicons.pngで問題ない人は、
- icons.png
- icons.css
をダウンロードすればそのまま使えます。
アイコンを追加/削除したい場合は、
get_icons.pl, 16x16_icons.tsvをダウンロード、編集して
ご利用ください

githubコード置き場

参考:CSS Spriteの流派をまとめるの方法8を採用

人気の投稿