来一个阿里妈妈字体图标的简单说明书吧-白红宇

随着前端技术的飞速发展,涌现了很多新的技术.而且我们在用户体验的路上也是一直在孜孜不倦的探索着.为了提高页面的加载速度,渲染速度.提高用户的体验做出了很多努力.

可是最近发现很多前端开发者还是不会是用阿里妈妈这个巨大的iconFont资源库,真的浪费哇.所以就有了这么一篇文章.

前方高能!!!非战斗人员请速速离开,下面开始事无巨细的介绍如何使用阿里妈妈的iconFont来优化前端图片的使用体验,从而降低开发成本,减少HTTP请求,从而提高用户体验.废话不多少,开搞

1.首先打开阿里妈妈的网站 ,登录什么的就不用说了吧

2.建议新建一个项目,名字看个人喜好
- 这里我新建了一个项目,接下来就可以去尽情的挑选自己喜欢的图标了.

3.Shopping
- 点击图标库然后尽情的将自己喜欢的图标加入购物车.然后添加到我们的demo项目中来.如下图所示:

4.点击查看在线链接,就会生成一个CSS,然后我们打开这个CSS

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"; }复制代码

这里的代码就是就是我们上面加入项目的图标.

至此,图标和代码已经有了,那么该如何使用在项目中呢?骚年,别着急,慢慢来,看下面的代码

###前方高能!前方高能!前方高能!

1.我们随便创建一个项目,创建一个CSS文件,将上面的代码复制进去.然后在HTML文件里面进行引用.很简单.看下面的代码:

			
    		iconFontDemoProj		
    						
    			
     				
      				
      item1
				
      item2
				
      item3
			
     
		
    
	复制代码

2.效果如下所示:

是不是很简单方便?(此处貌似听到了小猪在说:amazing!).

而且图片也不用去HTTP请求了:

页面的打开速度得到了显著的提升,amazing....Orz...

最后,是用ioncFont最大的一个好处是方便自定义,你可以像设置字体一样设置他的颜色,大小.加粗或者是倾斜等等,方便快捷无痛,amazing

看下面的代码所示:

			
    		iconFontDemoProj		
    						
    			
     				
      				
      item1
				
      item2
				
      item3
			
     
		
    
	复制代码

效果如下图所示:

结束语

至此,一个很简单的阿里妈妈字体图标使用教程就完事了,当然你也可以上传你自己的SVG,从而生成相关的CSS代码,其实也是很简单的.这里就不在详细的说明了,需要大家自己去探索一下.

OK,最后的最后,鼓掌撒花....