三步解决，阿里巴巴iconfont矢量图标在页面布局

 

      相信很多前端程序员都被黑成<切图仔>。为什么会这样说，源自在UI这个职业发展还不是特别火，很多中小型互联网公司，也就两个程序员一个前端一个后端外加一个设计师，页面中用到的图标都在Photoshop切来切去。甚至，他妈产品经理都不要，老板直接兼CEO、产品经理、测试总监、架构师，好了不说了之前我们公司就是。

       后来出现了UI 这个职业，我们看到的页面多少还是有那么一点点的美感；再后来为了方便前端程序员的巨大任务量，阿里这个公司开源了自己的图标库，真的方便了设计师，又方便了大前端。

        我靠，程序员都是话痨吗？讲东西前先铺垫，东拉西扯前端上下五千年。

开始我的表演：（此处应有掌声30S，setTimeout(30000,)）

三步解决iconfont图标布局

一、下载iconfont图标

1、http://www.iconfont.cn(iconfont官网)

①注册账号，推荐用其他社交账号直接登录。

②在页面下方选择自己需要的图标加入购物车。

③打开购物车

④添加至项目，并给你的项目起一个名字。

⑤下载至本地

2、把iconfont加入前端开发项目中

①重命名文件夹名称（可改可不改，主要是为了容易记&写）

②把文件夹剪切到项目根目录下

三、在项目中使用

（iconfont原理：看起来像图标，其实，在代码中他是以文字形式存在的，所以我们对，iconfont设置样式时，要把iconfont看做字体去设置。）

①打开font文件夹，找到demo.Unicode这个文件打开

②拷贝代码至CSS中

一定要修改URL的正确路径

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
  url('iconfont.woff') format('woff'),
  url('iconfont.ttf') format('truetype'),
  url('iconfont.svg#iconfont') format('svg');
}

 ③挑选相应图标并获取字体编码，应用于页面

 <p>&#xe63f;</p>

④在CSS设置样式 

p{
font-family:"iconfont";
font-size:16px;
color:red;
line-height:30px;
/*等其他样式*/

}

总结：iconfont在移动端和PC端使用越来越广泛了，通常常见的图标都是可以在iconfont.com中使用的，所以，写这篇文章希望能帮到大家。

至于为什么有那么多的小细节，源自想帮助初学者，让初学者或高手都能学会，才算上有价值的东西。忘了谁说的了，你能让傻子听明白你讲的东西，你才是牛X。

今天，分享到此结束。

欢迎到（全球最大的同性社区）Github关注我的Github:https://github.com/chaojiaheng

转载于:https://my.oschina.net/chaojiaheng/blog/1663763