vue中使用Symbol的方式引用iconfont
前提工作,先把自己要使用的图标都加入iconfot资源文件中。
1. 选择Symbol的方式,生成链接
2. 在index.html中引入js
3. 使用iconfont的地方写:此处的href 名字是在平台定义的iconfont名称
4. 修改css及样式
. 在index.html 先全局设置icon 样式
.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
. 在使用的vue文件中再个性化设置颜色大小等
.icon { height: 14px; width: 14px; margin-right: 12px; }
// 修改图标颜色 .icon:last-of-type { fill: #5f5f69; } .el-submenu:hover, .el-submenu.is-active, .el-menu-item.is-active, .el-menu-item:hover { span { color: #3585ff; } .icon:last-of-type { fill: #3585ff; } }