Vue for循环后的iconfont不能正常显示

最新推荐文章于 2023-04-13 10:46:24 发布
最新推荐文章于 2023-04-13 10:46:24 发布
阅读量2.6k 收藏 6
点赞数 7
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： Vue iconfont
原文链接：https://www.jianshu.com/p/39777a8d44e7
本文解决了一个在使用IconFont图标时常见的问题，当在for循环中调用图标，原本的代码可能无法正常显示。文章提供了一个简单有效的解决方案，即修改图标代码中的特殊字符，以确保在循环中图标能正确呈现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在使用iconfont图片时正常使用：

<span class="iconfont">&#xe801;</span>

在for循环之后显示的效果：

此时，需要将&#xe801;更换为\ue801即可。

Vue---day08侧边栏导航（双层for循环、字体图标、高亮显示）
ZHUSHANGLIN的博客
08-08 435
【代码】Vue---day08侧边栏导航（双层for循环、字体图标、高亮显示）
前端学习（1881）vue之电商管理系统电商系统之双层for循环渲染数据
歌谣的博客
08-07 289
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue' import Home from './components/Home.vue' Vue.use(Router) const router= new Router({ routes:[ {path:'/',redirect:'/login'}...
关于在vue中使用iconfont循环
8月13日
08-25 1745
也第一碰见这个问题，就记录一下 目前两种方法 一个是使用 unicode 一个是使用 font-class 第一种是介绍使用unicode <block v-for="(item1, index) in icon" :key="item1"> <i class="iconfont" :style="item1.iconbg">{{ item.type == item1.id ? item1.icontent : '' }} </i&g
vue iconfont通过循环渲染绑定
白大美的程序日志
11-09 321
对于日常开发的小伙伴而言，iconfont图标非常常见，当在侧边栏展示的时候，由于侧边栏要切换成动态接口获取，图标依然由前端提供渲染，这时候，该怎么写呐，话不多说，上代码 ```javascript <li class="sub-menu" @click="changeSer(item.code)" :class="{ 'sub-active': subActive === item.code }" v-for="item in s
v-for如何循环iconfont图标
YodgeGGG的博客
11-25 3019
v-for如何循环iconfont图标 先上个效果图 关于iconfont如何添加至项目大家可以自行搜索下，很简单，通常我们引用iconfont图标的方式是 复制代码然后直接引用，但是在v-for循环的数据中，直接写入循环出的内容就是一堆字符串，那么怎么解决呢，大家打开iconfont.css看下 .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-fon
解决阿里巴巴图标在v-for循环中渲染不出图标问题
weixin_42040328的博客
05-21 1498
解决阿里巴巴图标在v-for循环中渲染不出图标问题 v-for循环，按照下载的项目图标步骤来走 v-for 循环 <span v-for="(item, index) in info" :key="index"> <i class="iconfont">{{item.icon}}</i> </span> //页面中渲染的结果： 图标循环渲染： &#xe689;&#xe689; //这是
在一个v-for循环里面显示不同的图标
m0_51933554的博客
10-21 818
在一个v-for循环里面给不同的item加上不同的图标
vue2.0 可折叠列表 v-for循环展示的实例
12-29
先上一张效果图： 以前用angularjs操作基本上都是要取到每个列表的id再循环判断是不是当前...折叠列表单独做一个组件，图标是用的iconfont中生成的css链接：myMusicSheetList.vue <i class=icon iconfont ic
vue循环中点击选中再点击取消(单选)的实现
12-28
没有展开时 点击展开之后 <span class=moment_time>9分钟前 <span class=flashread_item_box_item><i class=iconfont></i>10 <span class=flashread_item_box_item @cli
vue实现图片上传预览功能
10-15
`v-for` 用于基于一个数组渲染一个列表，这里用于循环显示所有的图片。 - `@click` 事件监听：用于绑定点击事件。在点击上传按钮时，会触发 `houseUpload` 方法。 - `:ref` 属性：这是Vue 2.0的新特性，可以为元素...
iconfont动态加载不转义的问题
Annie的博客
05-10 1611
数据返回iconfont编码格式为：&#xe601; 将编码格式改为：\ue601
在vue中v-for循环遍历图片不显示错误的解决方案
m0_70547044的博客
04-13 1394
看了看代码路径也是正确的，而且单个是能显示的，可for循环之后图片就显示不出来了。最后发现单个显示的跟for循环显示的图片路径不一样。
Vue中使用iconfont字体图标转译问题导致的不显示
06-06 1355
导入字体图标后，正常使用时可以显示的，但是用到for循环里面，就会导致显示出错： 所以需要对编码进行转译操作：
vue 中使用iconfont（阿里巴巴图标库），解决iconfont 只显示小方框的问题
xuerwang的博客
07-26 2万+
1、用github账号或其他支持的账号登陆iconfont官网http://www.iconfont.cn/ 2、登录后寻找所需的图标加入购物车 3、进入购物车，下面选择添加至项目，如果没有先新建 4、添加后选择下载至本地下载font文件。这是我下载的font文件列表。 5、将下面带有icon font字样的文件放入系统文件夹中。 6、main.js中引入iconfont.css   ...
vue项目中正确使用iconfont
qq_37046171的博客
04-11 5851
1、打开 iconFont官网 选择自己喜欢的图标，并且添加购物车2、点击购物车，添加至项目3、下载至本地4、把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下（可创建一个css文件或iconfont文件） 5、在main.js中引入iconfont.css样式 import './assets/iconfont/iconfont.css...
解决iconfont 图标不显示问题
热门推荐
ppx_mqj的博客
09-05 4万+
刚开始用icon font图标库不是很熟悉，踩了一些坑，希望分享出来能给新手们带来一些帮助 从官网上下载图标至本地后，放到项目里面要注意一下两点： 1、路径问题 找到iconfont.css这个文件并打开它，你会看到它里面的路径是这样的 报错了，原因是我在项目里面存放路径是这样的 所以这个时候你只需要将路径改成你项目结构中的路径即可，修改后： 2、路径配置好后怎样把你下载的图标引入到代码中 ...
vue实战开发009:伪元素中如何引用字体图标
kevinfan的博客
04-18 1459
前面我们有说到如何使用Font Awesome字体图标： vue实战开发008:引入Font Awesome字体图标，在我们使用vue时通常不会把数据写死，而是定义一个数据列表，再通过遍历来获取相应的数据，这里我们模仿2345影视写了点内容，下面的版权声明我都是直接定义的数据列表再遍历展示的。 我们可以看到在上海市互联网违法和不良信息举报中心前面有个Window的图标（我...
在vue中引用iconfont中的图标完整教程（两种方式）：直接引用和在data中存放(Unicode格式)
qq_36485978的博客
02-13 4642
打开iconfont官网https://www.iconfont.cn/，搜索图标，例如这里搜索csdn图标： （有问题请添加QQ2435065796，共同交流） 选择你喜欢的图标，添加入库： 点击购物车，添加至项目 可以选择已存在的项目，或者新建项目 选择Unicode格式下载至本地 下载完成后解压，只保留图片中的5个文件，其余的删除 将这5个文件复制到vue项目中的asset...
VUE根据权限设置菜单不可见
05-18
在 Vue 中根据权限设置菜单不可见，可以通过以下步骤实现： 1. 首先，在组件中定义菜单的数据源，包括菜单名称、菜单路径、菜单图标等信息。 2. 在组件中定义用户的权限信息，可以是一个数组，也可以是一个对象，包含用户所具有的权限信息。 3. 在菜单组件中使用 `v-for` 循环渲染菜单列表，同时使用 `v-if` 判断当前用户是否有访问该菜单的权限，如果没有权限，则不渲染该菜单。 例如，我们可以定义一个 `menuList` 数组，包含多个菜单对象： ``` menuList: [ { name: '首页', path: '/', icon: 'home' }, { name: '用户管理', path: '/user', icon: 'user' }, { name: '订单管理', path: '/order', icon: 'shopping-cart' }, { name: '商品管理', path: '/product', icon: 'shop' } ] ``` 然后，我们可以定义一个 `userPermissions` 对象，包含当前用户所具有的权限信息： ``` userPermissions: { user: true, order: false, product: true } ``` 最后，在菜单组件中使用 `v-for` 循环渲染菜单列表，并使用 `v-if` 判断当前用户是否有访问该菜单的权限： ``` <ul> <li v-for="menu in menuList" v-if="userPermissions[menu.path.replace('/', '')]"> <router-link :to="menu.path"> <i :class="'iconfont icon-' + menu.icon"></i> {{ menu.name }} </router-link> </li> </ul> ``` 在上面的代码中，我们使用 `v-if` 判断当前用户是否有访问菜单的权限，通过 `menu.path.replace('/', '')` 将菜单路径转换为对应的权限属性名，然后使用 `userPermissions[...]` 判断该权限是否为 `true`，如果是，则渲染该菜单。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值