Iconfont阿里巴巴图标库引入方法

Web端引入

第一步：

打开网址：https://www.iconfont.cn/
挑选合适的iconfont（图标）添加至我的项目，添加好之后，打开我的项目，下载图标至本地；

第二步：

下载好之后，将文件解压，把font文件夹放至网页根目录上，里面的iconfont.css文件单独放到网页css文件夹当中；

第三步：

在网页css文件当中添加声明，即把以下代码添至文档当中：

        @font-face {
            font-family: 'iconfont';
            src: url('../font/iconfont.eot');
            src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
                url('../font/iconfont.woff') format('woff'),
                url('../font/iconfont.ttf') format('truetype'),
                url('../font/iconfont.svg#iconfont') format('svg');
        }

注意：声明中的url的路径，必须引用正确。

第四步：

继续添加定义使用 iconfont 的样式，代码如下：

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 30px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
        }

样式可以自行更改。

第五步：
挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#xe758;</i>

“iconfont” 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。