自制按钮图标的两种方法: image sprite和svg字体文件
用image sprite和svg字体文件这两种方法,都能够极大地减少小图形文件的数量, 从而减少服务器请求和带宽需求。提高网页的响应速度。
一、建立SVG字体文件
iconmoon 是一个在线工具,可以上传自己的SVG格式的图标文件,也可以从其中选择已有的图标, 定制出自己的字体文件。下载的结果包括了字体文件和一个简单的demo.html,
(https://icomoon.io/app/#/select),
(类似工具: https://glyphter.com)
二、用 image sprite
spritegen是一个在线工具,只要上传自己的image格式的图标文件, 就能够生成sprite文件和对应的css样式
http://css.spritegen.com/
三、自己动手写:
假设小图标已经手工合并到一个大图imageSprite.png中,其中每一个小图标占W*H的大小,W= 100,H=50,那么,css内容如下:(其中的class 名称可以自取)
.icon-demo-base {
background: url('imageSprite.png') no-repeat;
display: inline-block;
height: 50px; /* 每一个icon的 height和width */
width: 100px;
}
.icon0-0 {
background-position: 0 0; /* sprite图的左上角是(0,0)点, */
}
.icon1-0 {
background-position: -100px 0;
}
.icon2-0 {
background-position: -200px 0;
}
.icon3-0 {
background-position: -300px 0;
}
More:
* 在PS中可以把图像输出为SVG(File > Extract Assets”, 要求Photoshop CC版本高于October 2014 Update, http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/)
* image转SVG的在线工具: https://image.online-convert.com/convert-to-svg
* 如何设置SVG图的原点和基本大小
https://www.sitepoint.com/create-an-icon-font-illustrator-icomoon/
* https://www.sitepoint.com/build-svg-icons/
<img src="Chess_Pieces_Sprite.svg#black-horse">
* gulp-svg-spritesheet
gulp.spritesmith (用canvas,依赖于: Cairo and node-gyp)
* http://fontastic.me/howto
http://fontello.com/: 字体有收费的