关于如何使用阿里巴巴iconfont

关于如何使用阿里巴巴iconfont

一、首先进入官网 www.iconfont.cn

二、选择你喜爱的字体样式

三、点击加入购物车（别担心，还没交钱，哎嘿嘿Q~Q）

四、点击右上角购物车，浏览器左侧会出现一栏，点击其中的添加至项目（如果还没有项目可以新建一个）

五、可选择三种想要的下载形式 ，然后点击下载至本地，之后解压

六、接下来说明一下三种使用方法

① 使用源码：将解压后文件夹拖拽到项目目录下，CSS中添加如下代码

 @font-face {  
            font-family: 'aliIconfontCode';       /* 此处是定义字体的名称可随意更改*/
            src: url('alifont/iconfont.eot');        /*以下代码可复制粘贴但是注意目录结构*/
            src: url('alifont/iconfont.eot?#iefix') format('embedded-opentype'),
            url('alifont/iconfont.woff2') format('woff2'),
            url('alifont/iconfont.woff') format('woff'),
            url('alifont/iconfont.ttf') format('truetype'),
            url('alifont/iconfont.svg#iconfont') format('svg');
            font-style: normal;
            font-weight: normal;
        }
         .aliIconfontCode{
            font-family: "aliIconfontCode";
            font-size: 100px;   /*字体大小*/
            color: pink;          /*字体颜色*/
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        <span class="aliIconfontCode">&#xe638;</span>     /*找到你选择的字体样式码填在你想添加的地方*/

② 使用封装好的类：将解压后文件夹拖拽到项目目录下，添加如下代码

<link rel="stylesheet" href="alifont/iconfont.css">  /*代码中引入封装好的CSS*/
<span class="iconfont icon-zhanghuguanli" style="font-size: 100px;color: purple"></span>  /*代码中添加类*/

③ 使用svg渲染出原有的漂亮颜色：将解压后文件夹拖拽到项目目录下，添加如下代码

 <script type="text/javascript" src="alifont/iconfont.js"></script>   /*代码中引入js*/
  .aliSymbol{     /*CSS 中添加样式*/
            width: 100px;
            height: 100px;
             /*vertical-align: top;*/
            fill: currentColor;
            overflow: hidden;
        }
 <svg class="aliSymbol" aria-hidden="true">
    <use xlink:href="#icon-zhanghuguanli"></use>
</svg>

此外再提供个好的网站，也有矢量图库可供参考：https://icomoon.io/