v-for如何循环iconfont图标

v-for如何循环iconfont图标

先上个效果图

关于iconfont如何添加至项目大家可以自行搜索下，很简单，通常我们引用iconfont图标的方式是

复制代码然后直接引用，但是在v-for循环的数据中，直接写入循环出的内容就是一堆字符串，那么怎么解决呢，大家打开iconfont.css看下

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-jichuzidianziliao:before {
  content: "\e609";
}

.icon-daohangzhankai-:before {
  content: "\e712";
}

.icon-qianjin:before {
  content: "\e63b";
}

.icon-weibiaoti1:before {
  content: "\e614";
}

大家将页面滚动至下方时可以看到不同图标里面的content中的字符串，例’\e614’，我们从iconfont首页上找到图标名，去iconfont.css找到对应的内容，将content中的字符串加入到需要循环的数据中，但是要改为这个格式

例：’\ue614’，就是在e前面加一个u就可以了

最后最后，最最最关键的一个点就是，一定要在你循环的元素标签中加入class=“iconfont”！！！ 切记切记！！

到这里问题就解决啦！让我们一起共同进步把！