通过Iconfont在线调用项目图标

最新推荐文章于 2024-03-21 14:11:38 发布

Vxiaozhe1998

最新推荐文章于 2024-03-21 14:11:38 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB 文章标签： Iconfont

本文链接：https://blog.youkuaiyun.com/AME1314/article/details/97120751

WEB 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何通过Iconfont在线调用项目图标，重点讲述了使用Symbol方法。首先登录Iconfont账号，选择我的项目，获取在线代码。接着，在HTML文件中引入CSS和JS，将图标代码添加到特定标签中，实现图标的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们登陆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进行演示

创建项目

在标签内添加如下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:

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


<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;">

即可: