!!字体图标（iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等）

http://www.iconfont.cn/ 　　阿里巴巴矢量图标库 iconfont

http://fontawesome.io　　fontawesome图标　　http://www.bootcss.com/p/font-awesome/#icons-new 　　2015-10-27

http://isux.tencent.com/icon-font.html 　　图标字体化浅谈（教程）　　2015-11-3

https://icomoon.io/app 　　图标字体生成器 IcoMoon！一个可以通过个性化设置来创建自定义图标（字体）的生成器 （打包下载的是一个个的svg和png，不用它了。）

http://fontello.com/ 　　图标字体生成器 Fontello （很好。还能用json配置文件方式保存项目）

http://alloyteam.github.io/gopng/ 　　雪碧图生成工具（好）

http://www.mobileui.cn/svg-icon-fuzzy-problems.html 　　四招帮你搞定SVG Icon的模糊问题（这个要看！ 是关于illstrator的设置）　　2015-11-17 　　

 

一、iconfont 图标库的使用：

第一步引入，第二步定义iconfont样式：

/*第一步：使用font-face声明字体*/
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
/*第二步：定义使用iconfont的样式*/
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

第三步：

<i class="iconfont">&#x33;</i>

我换了个写法：（这样可以不用维护烦人的html里面的代码了！——"类似 这样的乱码" ）

<style>
.icon1:before{content:"\e600";color:red;}
.icon2:before{content:"\e601"}
.icon3:before{content:"\e602"}
</style>
<i class="icon iconfont icon1"></i><br>
<i class="icon iconfont icon2"></i><br>
<i class="icon iconfont icon3"></i><br>

优点：略。

缺点：

1、要为图标建project，否则发生改动时，会导致图标的次序混乱。project只能绑定在自己账号中，这点不如Fontello

2、&#xe600; 这样的代码要写在页面的html中，很不好维护。写成<i class="icon iconfont icon3"></i>这种方式虽然也可以，但是自己还要手动处理大量代码，很烦人。而Fontello有现成的文件是直接生成的、可直接引用。

 

 

二、 Fontello 图标字体生成器（好用！推荐！）　　http://fontello.com/ 　　2015-11-4

 config.json是配置文件。点击“扳手”图标，import，即可导入配置文件。

下载的文件中，css要使用这个：fontello-embedded.css

<i class="icon-star"><i>   就可以这样使用图标了。

 

用PSD图，转化为svg的步骤：

1.必须是矢量图，位图不能用。
2.photoshop的图层上，右键，转化为智能对象
3.photoshop的图层上右键，导出内容。存为： 1.psb
4.illustrator打开1.psb，文件——>另存为，面板中选 *.svg

 

 

三、雪碧图生成工具（好用！推荐！）  http://alloyteam.github.io/gopng 　　2015-11-5

.sprite{display:inline-block;width:<%=w%>px;height:<%=h%>px;background-image:url("../images/sprite.png");background-repeat:no-repeat;}
.sp-<%=name%>{background-position:-<%=x%>px -<%=y%>px;}

 CSS生成以后要改成这样的：

<style>
.sprite{display:inline-block;width:14px;height:14px;background-image:url("../images/sprite.png");background-repeat:no-repeat;}
.sp-j5-03{background-position:-0px -0px;}
.sp-j5-04{background-position:-14px -0px;}
.sp-j5-05{background-position:-28px -0px;}
</style>
<i class="sprite sp-j5-03"></i>
<i class="sprite sp-j5-04"></i>
<i class="sprite sp-j5-05"></i>
<i class="sprite sp-j5-06"></i>

 

 

 

四、Glyphicons 字体图标，bootstrap自带。（约250个左右）

略。 要用的时候看文档。http://v3.bootcss.com/components/

<span class="glyphicon glyphicon-cog"></span>

 

五、font Awesome （约519个）图标的使用： http://fontawesome.io/icons/

完全不依赖JavaScript，因此无需担心兼容性。免费。为bootstrap设计，但可以完美兼容其它框架。缺点是有点偏大。

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" type="text/css" rel="stylesheet" />
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o"></i>
<hr>
<i class="fa fa-chevron-up"></i>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-left"></i>
<i class="fa fa-chevron-right"></i>
<hr>
<i class="fa fa-spinner"></i>

 

 

 

（1）只在你确定你非常需要 @font-face的时候才使用它;
（2）将你的 @font-face定义在所有的script标签前;
（3）如果你有许多字体文件，考虑将它们分散到几个域名下;
（4）不要包含没有使用的 @font-face声明——IE将不分它使用与否，通通加载;
（5）Gzip字体文件，同时给它们一个未来的过期头部声明;
（6）考虑字体文件的后加载，起码对于IE。

 

http://io-meter.com/2014/07/20/replace-icon-fonts-with-svg/ 　　Web 设计新趋势: 使用 SVG 代替 Web Icon Font（阅读）　　2015-11-4

http://www.cnblogs.com/0603ljx/p/4980261.html　　矢量图标的使用（有谈兼容性的一部分内容可看）　　2015-11-20

 

 

...