随着前端技术的飞速发展,涌现了很多新的技术.而且我们在用户体验的路上也是一直在孜孜不倦的探索着.为了提高页面的加载速度,渲染速度.提高用户的体验做出了很多努力.
可是最近发现很多前端开发者还是不会是用阿里妈妈这个巨大的iconFont资源库,真的浪费哇.所以就有了这么一篇文章.
前方高能!!!非战斗人员请速速离开,下面开始事无巨细的介绍如何使用阿里妈妈的
iconFont来优化前端图片的使用体验,从而降低开发成本,减少HTTP请求,从而提高用户体验.废话不多少,开搞
1.首先打开
阿里妈妈的网站
点我去阿里妈妈,登录什么的就不用说了吧-
2.建议新建一个项目,名字看个人喜好
-
这里我新建了一个项目,接下来就可以去尽情的挑选自己喜欢的图标了.
演示项目.png
-
-
3.Shopping
- 点击
图标库然后尽情的将自己喜欢的图标加入购物车.然后添加到我们的demo项目中来.如下图所示:
- 点击
demoLIst.png|cneter
- 4.点击
查看在线链接,就会生成一个CSS,然后我们打开这个CSS
点我.png
- 5.打开之后的CSS代码如下图所示:
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.eot?t=1501814101195'); /* IE9*/
src: url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.eot?t=1501814101195#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.woff?t=1501814101195') format('woff'), /* chrome, firefox */
url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.ttf?t=1501814101195') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.svg?t=1501814101195#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-add:before { content: "\e6df"; }
.icon-addition_fill:before { content: "\e6e0"; }
.icon-addition:before { content: "\e6e1"; }
.icon-addpeople_fill:before { content: "\e6e2"; }
.icon-browse_fill:before { content: "\e6e4"; }
.icon-browse:before { content: "\e6e5"; }
.icon-brush:before { content: "\e6e6"; }
.icon-camera:before { content: "\e6e7"; }
.icon-close:before { content: "\e6e9"; }
这里的代码就是就是我们上面加入项目的图标.
项目中的图标.png|center
至此,图标和代码已经有了,那么该如何使用在项目中呢?骚年,别着急,慢慢来,看下面的代码
前方高能!前方高能!前方高能!
- 1.我们随便创建一个项目,创建一个CSS文件,将上面的代码复制进去.然后在HTML文件里面进行引用.很简单.看下面的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iconFontDemoProj</title>
<link rel="stylesheet" type="text/css" href="css/icon-font.css"/>
<style type="text/css">
ul,li{
list-style: none;
}
</style>
</head>
<body>
<div class="header">
<ul>
<!--这里的i就是我们的字体图标,第二个class就是对应的icon-->
<li><i class="iconfont icon-close"></i>item1</li>
<li><i class="iconfont icon-addition"></i>item2</li>
<li><i class="iconfont icon-addition_fill"></i>item3</li>
</ul>
</div>
</body>
</html>
2.效果如下所示:
效果.png
是不是很简单方便?(此处貌似听到了小猪在说:
amazing!).
而且图片也不用去HTTP请求了:
no-httpRequest.png
页面的打开速度得到了显著的提升,amazing....Orz...
最后,是用ioncFont最大的一个好处是方便自定义,你可以像设置字体一样设置他的颜色,大小.加粗或者是倾斜等等,方便快捷无痛,
amazing
看下面的代码所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iconFontDemoProj</title>
<link rel="stylesheet" type="text/css" href="css/icon-font.css"/>
<style type="text/css">
ul,li{
list-style: none;
}
/*在这里可以很方便的定义字体的一些属性*/
.iconfont{
font-size: 20px;
font-weight: bold;
margin: 0 10px 0 0;
font-style: inherit;
}
.icon-close{
color: red;
}
.icon-addition{
color: yellowgreen;
}
.icon-addition_fill{
color:cyan
}
</style>
</head>
<body>
<div class="header">
<ul>
<!--这里的i就是我们的字体图标,第二个class就是对应的icon-->
<li><i class="iconfont icon-close"></i>item1</li>
<li><i class="iconfont icon-addition"></i>item2</li>
<li><i class="iconfont icon-addition_fill"></i>item3</li>
</ul>
</div>
</body>
</html>
效果如下图所示:
amazing-pic.png
结束语
至此,一个很简单的阿里妈妈字体图标使用教程就完事了,当然你也可以上传你自己的SVG,从而生成相关的CSS代码,其实也是很简单的.这里就不在详细的说明了,需要大家自己去探索一下.
OK,最后的最后,鼓掌撒花....
