vue使用ruoyi框架自制icon图标

首先将图片放入asserts目录下的icons中。

再打开asserts/styles中的element-ui.scss在其中进行编辑

//竖线iocn
.el-icon-vline{
  background: url('../icons/verticalline.png') left no-repeat;
}
.el-icon-vline:before{
  content: "替";
  font-size: 16px;
  visibility: hidden;
}

//无人机
.el-icon-uav{
  background: url('../icons/equipment_img.png') left no-repeat;
  background-size: 100%;
}
.el-icon-uav:before{
  content: "替";
  visibility: hidden;
}

//电池
.el-icon-battery{
  background: url('../icons/电池.png') left no-repeat;
  background-size: 100%;
}
.el-icon-battery:before{
  content: "替";
  visibility: hidden;
}

//部件
.el-icon-parts{
  background: url('../icons/部件.png') left no-repeat;
  background-size: 100%;
}
.el-icon-parts:before{
  content: "替";
  visibility: hidden;
}

最后

以上就是失眠猎豹为你收集整理的vue使用ruoyi框架自制icon图标的全部内容，希望文章能够帮你解决vue使用ruoyi框架自制icon图标所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。