Uni-app项目相关笔记2-阿里巴巴矢量图标库在前端的使用

Aiden Targaryen

已于 2022-03-31 08:36:02 修改

阅读量173

点赞数 1

分类专栏： uni-app 文章标签： html html5 css

于 2021-09-25 16:24:14 首次发布

本文链接：https://blog.csdn.net/weixin_46065314/article/details/120467634

版权

uni-app 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

阿里巴巴矢量图标库 https://www.iconfont.cn/

在这里插入图片描述

class的使用方式

在这里插入图片描述
引入方式：

<link rel="stylesheet" href="./iconfont.css">

使用时，在需要的位置通过添加class即可使用，优点是非常灵活，可以通过更改字体大小font-size，以及颜色color等style属性修改图标的颜色和大小，xxx为相应的图标名

<span class="iconfont icon-xxx"></span>

可以通过查看demo_index.html查看图标名
在这里插入图片描述
demo如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>iconfont Demo</title>
	<link rel="stylesheet" href="iconfont.css">
</head>
<body>
	<span class="iconfont icon-kabao" style="font-size:30px; color: red;"></span>
</body>
</html>

效果如下
在这里插入图片描述

Symbol的使用方式

这样使用的一大有点就是可以支持多色图标
在这里插入图片描述
引入方式

<script src="./iconfont.js"></script>
<!--加入通用 CSS 代码（引入一次就行）-->
<style>
.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
</style>

应用方式（xxx是图标名称，参考上面获取）

<svg class="icon" aria-hidden="true">
	  <use xlink:href="#icon-xxx"></use>
</svg>

demo如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>iconfont Demo</title>
	<script src="./iconfont.js"></script>
	<style>
	.icon {
		width: 1em;
		height: 1em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}
	</style>
</head>
<body>
	<svg class="icon" aria-hidden="true">
		<use xlink:href="#icon-huiyuan"></use>
	</svg>
</body>
</html>