引入阿里云字体图标库的方法

前言

  引入阿里云字体图标有两种方法：一种是在线链接引入；另一种是下载后引入本地链接。
  无论哪种方式都需要登陆才能执行后续操作，地址为：阿里巴巴矢量图标库
点击登录后：
可以使用这三种账号登录（唉，没有QQ微信登录），

• GitHub账号（懂得都懂，不懂我也不想多说了。开玩笑~）。点击后会跳转GitHub的登录界面，怎么说呢，搞不好要翻墙才行，不然就是有点慢。
• 阿里域账号 啊这，我是没有的。或许某位大佬有，估计也不会来这看吧。
• 新浪微博账号 这个应该比较容易，总之登录就ok了。

然后点击点击点击…
第一个是放入购物车，第二个是收藏，第三个是下载。（啊，这才是dddd才对）
然后右侧点击购物车图标就能看到

1 在线字体图标库引入

点击添加至项目，没有就新建个项目…
然后就会进入到这个界面：

复制源码贴至<style></style>内部
参考：

    <style>
        @font-face {
                font-family: 'iconfont';  /* project id 2496512 */
                src: url('http://at.alicdn.com/t/font_2496512_gz4rb43pz9t.eot');
                src: url('http://at.alicdn.com/t/font_2496512_gz4rb43pz9t.eot?#iefix') format('embedded-opentype'),
                     url('http://at.alicdn.com/t/font_2496512_gz4rb43pz9t.woff2') format('woff2'),
                     url('http://at.alicdn.com/t/font_2496512_gz4rb43pz9t.woff') format('woff'),
                     url('http://at.alicdn.com/t/font_2496512_gz4rb43pz9t.ttf') format('truetype'),
                     url('http://at.alicdn.com/t/font_2496512_gz4rb43pz9t.svg#iconfont') format('svg');
        }/* 这里一定要加上http:,粘贴过来的源码其实是没有这个的，所以可能出现引入失败的情况 */

        /* 定义样式 引入阿里字体图标 */
        .myicon {
            font-family: 'iconfont';
            /* 引入阿里生成字体格式 要跟上边的font-family相同 */
            font-size: 80px;
        }
    </style>

body部分：

    <!-- 小汽车的字体图标 -->
    <span class="myicon">&#xe692;</span>
    <!-- home的字体图标 -->
    <span class="myicon" style="color:red">&#xe635;</span>

span标签的内容就是上方图标的代码。
引入的链接要正常使用，必须要加上http:
运行效果图：

2 本地字体图标库引入

下载解压后直接拖至打开的项目中。
里面的demo_index.html文件就是官方引入介绍。

案例：
css部分：

    <link rel="stylesheet" href="./font_2496571_srbpyrebez/iconfont.css">
    <script src="././font_2496571_srbpyrebez/iconfont.js"></script>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('./font_2496571_srbpyrebez/iconfont.js');
            src: url('./font_2496571_srbpyrebez/?#iefix') format('embedded-opentype'),
                url('./font_2496571_srbpyrebez/iconfont.woff2') format('woff2'),
                url('./font_2496571_srbpyrebez/iconfont.woff') format('woff'),
                url('./font_2496571_srbpyrebez/iconfont.ttf') format('truetype'),
                url('./font_2496571_srbpyrebez/iconfont.svg#iconfont') format('svg');
        }

        /* Unicode 引用 */
        .my {
            font-family: 'iconfont';
            font-size: 50px;
        }

        /* font-class 引用 */
        .icon {
            width: 100px;
            height: 100px;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>

body部分：

    <!-- Unicode 引用  -->
    <span class="my">&#xe698;</span>
    <span class="my">&#xe64b;</span>
    <span class="my">&#xe629;</span>
    <span class="my">&#xe60a;</span>
    <!-- font-class 引用 -->
    <span class="iconfont icon-paopao" style="font-size:80px;color:red;"></span>
    <!-- Symbol 引用 -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-naozhong"></use>
    </svg>

效果图：
到此结束，我只想说懂的都懂，不懂得我也不多解释了 。