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”！！！切记切记！！

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

v-for如何循环iconfont图标相关推荐

el-select 内如何渲染彩色IconFont图标
el-select 内如何渲染彩色IconFont图标导入 Let's go 1.IconFont 引入方式 2.开始导入 3.注册通用组件 4.好像跑题了 5.el-select中渲染IconFo ...
Swift使用iconfont图标
iconfont怎么在iOS中使用了什么是iconfont? 简而言之就是将图标用文字(通过编码)字体的形式显示. 优点:减少项目体积包, 减少切2倍图和3倍图 , 各设备显示效果都不错, 可 ...
前端知识：如何创建自己的Iconfont图标库
在日常的开发过程中,前端页面经常会引用一些图标,iconfont图标库是前端开发者非常友好的在线字体图标库.大家可以根据平常所涉及的项目,收藏自己需要的图标库,方便在后续的项目中使用,今天小编给大家介 ...
WPF 如何将IconFont图标转成Geometry
之前每次使用IconFont图标,都要去下载一个png图片,每次颜色什么的改了,都要重新下载,太苦逼了. 现在好了,终于找到如何方便快速地使用IconFont图标了. 是应该的演示如何从IconFon ...
[软技能] 请说说使用iconfont图标的优点和缺点
[软技能] 请说说使用iconfont图标的优点和缺点优点:减少请求次数,将多个 icon 合并到一个字体文件中,从而提高网页性能: 自由的变化大小和颜色,因为字体是可以通过样式来设置大小和颜色的: ...
vantUI 自定义引入iconfont图标（3种风格）- 案例篇
文章目录 vantUI 自定义引入iconfont图标(3种方法:含案例截图) 效果图 · 对比: 重要代码`(3种代码格式)`: 全局引入 · 代码: 项目文档 · 目录结构本地document文 ...
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式
项目中引入阿里巴巴图标--iconfont图标的使用-svg格式一.下载图标 1.先进入iconfont.cn页面 iconfont官网:https://www.iconfont.cn/ 2.登陆, ...
icon-font 图标字体的使用
icon-font 图标字体的使用, 方法一:可以在icomoon下载相应的图表字体,官网为:https://icomoon.io/ 进去会提供600+的免费图表,如果想要更多的图表字体可选择Icon ...
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...

v-for如何循环iconfont图标

v-for如何循环iconfont图标

v-for如何循环iconfont图标相关推荐

最新文章

热门文章