相信很多前端程序员都被黑成<切图仔>。为什么会这样说,源自在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></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