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

作者: iplaycodex | 来源:发表于2017-08-04 10:50 被阅读666次

来一个阿里妈妈字体图标的简单说明书吧
添加自定义字体图标icon
字体图标的使用
阿里的字体库—iconfont
微信小程序开发（wepy + less/scss + iconf
uni-app 引入本地 iconfont 的正确用法
内存
阿里iconfont字体图标的使用
阿里字体小图标的使用
9-首页头部

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

可是最近发现很多前端开发者还是不会是用阿里妈妈这个巨大的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>

效果如下图所示: