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

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

可是最近发现很多前端开发者还是不会是用阿里妈妈这个巨大的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文件里面进行引用.很简单.看下面的代码:

    
        
        
        
        
    
    
        

            

                
                
item1
                
item2
                
item3
            
        
    

2.效果如下所示:

效果.png

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

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

no-httpRequest.png

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

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

看下面的代码所示:

    
        
        
        
        
    
    
        

            

                
                
item1
                
item2
                
item3
            
        
    

效果如下图所示:

amazing-pic.png

结束语

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

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