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;">
即可:
样式
网友评论