通过Iconfont在线调用项目图标

首先我们登陆https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a，登陆自己的账号。

Iconfont

在帮助文档中的代码应用有四种方式进行引用，友情链接：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.16&helptype=code

帮助文档

在这里我只介绍使用symbol方法在线调用图标

如果能够看懂帮助文档就不用往下看了

通过在我的项目中选取Symbol

Symbol

点击在线代码处

生成在线代码

PS：如果无该区域是为打开查看在线链接

查看在线链接

保存生成代码

生成代码

打开HTML编辑器，小编使用HbuliderX进行演示

创建项目

在<head>标签内添加如下CSS代码


<style type="text/css">

    .icon {

      width: 1em; height: 1em;

      vertical-align: -0.15em;

      fill: currentColor;

      overflow: hidden;

    }

</style>

引入在线图标JS


<script type="text/javascript" src="http://at.alicdn.com/t/font_1312032_5plfztdvxom.js"></script>

注意：在之前生成的代码前面一定要加http:

代码

接下来在<body>中的代码格式为：


<svg class="icon" aria-hidden="true">

    <use xlink:href="#icon-xxx"></use>

</svg>

PS：#icon-xxx处替换你自己的图标代码

替换代码

通过图示复制代码

复制代码

完整代码如下：


<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">

    .icon {

      width: 1em; height: 1em;

      vertical-align: -0.15em;

      fill: currentColor;

      overflow: hidden;

    }

</style>

<script type="text/javascript" src="http://at.alicdn.com/t/font_1312032_5plfztdvxom.js"></script>

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title></title>

</head>

<body>

<svg class="icon" aria-hidden="true">

    <use xlink:href="#iconauto"></use>

</svg>

</body>

</html>

结果

通过在


<svg class="icon" aria-hidden="true">

中添加部分样式如：


<svg class="icon" aria-hidden="true" style="color: #ff0000;font-size: 6.25rem;">

即可:

样式