前端字体图标使用

自律的冷静

已于 2022-04-13 00:52:24 修改

阅读量1.2k

点赞数

分类专栏：前端文章标签： html5 css js

于 2022-04-12 02:41:03 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_62321552/article/details/124114144

版权

前端专栏收录该内容

1 篇文章

订阅专栏

阿里的字体图标库:https://www.iconfont.cn/

在里面下载图标对应的源码解压后有6个文件在这里插入图片描述 dome.css：里面是demo_index.html的样式
demo_index.html：有字体使用的说明
iconfont.css：使用css来引用字体图标
iconfont.js：使用js进行引用方式字体图标
iconfont.json：这面写个每一个字体图标的JSON的数据格式
iconfontt.tth：是字体图标的实现，前面css后js文件都是引用

使用字体图标的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 方式1和2都需要引入的css文件 -->
    <link rel="stylesheet" href="static/font/iconfont.css">
	<!-- 方式3：引入js文件 -->
    <script src="static/font/iconfont.js"></script>
    <!-- 方式3：加载这一段代码对字体样式进行初始化，添不添加都可以 -->
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>
<body>
<!-- 方式1：使用字体的统一码，在iconfont_index.html中有提供 -->
<span class="iconfont">&#xe60b;</span>

<!-- 方式2：使用字体类进行使用，同样在iconfont_index.html中有提供 -->
<span class="iconfont icon-dui"></span>

<!-- 方式3：js方式进行引用 -->
<svg class="icon" aria-hidden="true">
	<use xlink:href="#icon-cha"></use>
</svg>

</body>
</html>