icon 的 演变史
1) img 标签
2) image sprite 通过css 的 background-position定位显示不同的 icon 图标 说实话 这个真的有点恶心 每添加或者删除掉一个图标 都需要UI从新处理该雪碧图 也需要前端重新重新处理定位 定位起来也很麻烦
3) font-awesome 这个我现在还在用 比较麻烦的就是 有时候项目需要的图标 这个上边没有 so sad
4) iconfont 这个之前没用过 可以学习一下
iconfont:
一、unicode
1) 拷贝项目下面生成的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- */
}
2) 定义使用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;
}
3) 挑选相应图标并获取字体编码
<i class="iconfont">3</i>
二、font-class引用
1) 拷贝项目下面生成的fontclass代码
at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
2) 挑选相应图标并获取类名,应用于页面
<i class="iconfont icon-xxx"></i>
三、symbol引用
1) 拷贝项目下面生成的symbol代码
引入 at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
2) 加入通用css代码
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
3) 挑选相应图标并获取类名,应用于页面
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
1)与UI合作 ,在iconfont上新建项目,创建属于该项目的icon库
2)下载代码 应用到你的项目中
按照该文件中的提示完成icon在项目中的应用
我使用的是font-class 方便我改动图片的颜色和大小
将该文件夹中的iconfont.css iconfont.svg iconfont.ttf iconfont.woff iconfont.eot拷贝到我的项目中
在需要使用该icon的地方引入该css