vue-manage-system

# 图标

# Elment Plus 图标

Elment Plus 提供了丰富的图标，具体的图标名称和使用方法请参考 Element Plus 图标 (opens new window)。

如果这些图标还不能满足你的需求，那么就可以用到自定义图标了。

# 自定义图标

这里用到的是阿里图标库。首先在阿里图标上创建一个项目，设置图标前缀，比如 el-icon-lx，设置 Font Family，比如 lx-iconfont，添加需要用到的图标到项目中，我这边选择 Font class 生成在线链接，因为所有页面都需要用到图标，就直接在 index.html 中引入该 css 链接就行了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue-manage-system</title>
		<!-- 这里引入阿里图标样式 -->
		<link rel="stylesheet" href="//at.alicdn.com/t/c/font_830376_92o68tc95je.css" />
	</head>
	<body>
		<div id="app"></div>
	</body>
</html>

然后需要设置前缀为 el-icon-lx 的图标类名使用 lx-iconfont 字体。

[class*='el-icon-lx'],
[class^='el-icon-lx'] {
	font-family: lx-iconfont !important;
}

但是这个样式要放在哪里才可以呢？这可不是随便放就行的。在 main.js 中，引入了 element-ui 的样式，而样式中有这样的一段 css:

[class*=' el-icon-'],
[class^='el-icon-'] {
	font-family: element-icons !important;
	speak: none;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: baseline;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

很明显，如果这段 css 在我们自定义样式后面才执行，就会覆盖了我们的样式，那自定义的图标就显示不了。而在 build 项目的时候，会把 APP.vue 中的的样式打包进 app.css 中，然后再把 main.js 中引用到的样式追加到后面。那么我们可以把自定义样式放到一个 css 文件中，然后在 main.js 引入 element css 的后面引入，那就可以覆盖掉默认字体了，然后便可以在项目中通过 <i class="el-icon-lx-people"></i> 使用图标了。

那机智的人就发现了，我自定义图标的前缀不要含 el-icon- 就不会有这样的问题了。是的，那么为了和原有字体保持一样的样式，需要复制它的整段 css

/* 假设前缀为 el-lx */
[class*='el-lx-'],
[class^='el-lx-'] {
	font-family: lx-iconfont !important;
	speak: none;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: baseline;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

← 主题 →