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图标内容请搜索靠谱客的其他文章。