解决iview菜单使用iconfont图标无法显示的问题

最新推荐文章于 2024-04-28 14:26:54 发布
最新推荐文章于 2024-04-28 14:26:54 发布
阅读量1.9w 收藏 4
点赞数 6
分类专栏： 前端 vue iView
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvdou1120101985/article/details/82887038
版权
前端 同时被 3 个专栏收录
19 篇文章 0 订阅
订阅专栏
vue
15 篇文章 1 订阅
订阅专栏
iView
10 篇文章 0 订阅
订阅专栏

写在前面：

首先，我出现问题的场景是使用在导航菜单上，即 Menu Item；

其次，我是使用json文件递归生成的菜单列表，在meta属性中设置的icon；

 

今天在使用iconfont的图标作为菜单的图标时发现总是显示成方框框

使用方法和设置Button的图标是一样的，检查了好久也没有发现问题，百思不得其解……

使用F12检查元素，发现原来框架是在样式前面加上了 ivu-icon！所以样式的名称已经被改变了

解决的办法就是在样式的前面加上空格：

浏览器刷新果然成功了！查看页面元素样式如下：

这个问题不好发现原因，希望可以帮助到遇到同样问题的同行们~

Connie_豆
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
iview使用自定义iconfont
Debug Dream的博客
10-17 1057
最近睡眠质量不好，记性不佳，好久没更了，今个遇到了一个小问题，必须赶紧记下来，免得过后忘咯。话不多说，直接给大家开仓放粮。 vue+iview构造后台管理系统时，遇到iview自己提供的icon不满足需要时（总共那么点图标，够用才怪呢），难免需要引入一些其他的icon或者自定义icon，这里我们就用的是阿里的矢量图库（目前我认为最全最丰富的图标库）。 ###1.先在阿里矢量图标库把你需要的图标挨...
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
12-13
做vue项目使用的iviewUI库，打包上线之后发现icon都不显示，然后做了很多尝试，更改打包路径等，都没有太好的效果，最后还是在网上找到了方法： 1. 方法一： 在build/utils.js下面找到这段代码，将其中publicPath...
iview使用时部分图标不显示
baidu_41682543的博客
09-24 1583
最近在使用iview时，发现icon中部分图标不能显示，询问度娘后才知之前引入的是 " view-design " 而不是官网的 " iview " 。 iview官网地址：https://iview.github.io/components/icon view-design官网地址：https://www.iviewui.com/components/icon ...
iview的icon图标不显示问题
qq_40286424的博客
09-03 4902
记：2021年9月3日，寻问度娘iview官网，在导入相关icon图标发现并没有生效。再次…再次…询问度娘,才知之前引入的是“view-design”而不是如今官网的‘iview’。 view-design官网地址：https://www.iviewui.com/components/icon iview官网地址：https://iview.github.io/components/icon ...
uni-ui 使用uni-icons有些图标显示不出来，如down，up图标
最新发布
weixin_44294359的博客
04-28 1150
uni-ui 使用uni-icons有些图标显示不出来，如down，up图标
引入iview图标库ivu-icon 图标无法显示
hello world
10-30 5170
今天升级版本发现图标显示不出来，重新引入了好几次还是不行，百度改路径也不行，然后我发现了 这句话还是在文档最底部，我·#￥%~·#￥ 引入方法和阿里图标一样 ...
iview vue 打包图标不显示_vue.js iview打包后字体图标不显示解决办法
weixin_27964579的博客
12-24 492
在vue+cli项目中使用iview组件及icon图标，打包后icon不显示,解决办法：1.在build文件夹下找到utils.js文件，把publicPath改为 ../../if (options.extract) {return ExtractTextPlugin.extract({publicPath:'../../',use: loaders,fallback: 'vue-style-l...
iview中icon不能显示的问题
热门推荐
qq_39865491的博客
10-26 1万+
当代码中引入自定义的icon时,iview中原来的icon就不能显示出来了 这是因为引入了自定义的icon,使得icon的格式发生了变化 在iview的icon前面加上ivu-icon-,完美解决 ...
iview vue 打包图标不显示_vue.js iview打包上线后字体图标不显示解决办法
weixin_39718173的博客
12-24 100
在vue+cli项目中使用iview组件及icon图标，打包后icon不显示,解决办法：1.在build文件夹下找到utils.js文件，把publicpath改为 ../../if (options.extract) {return extracttextplugin.extract({publicpath:'../../',use: loaders,fallback: 'vue-style-l...
vue.js iview打包上线后字体图标不显示解决办法
10-15
在Vue.js项目中，特别是使用了iView UI库的情况下，开发者可能会遇到打包上线后字体图标不显示的问题。这个问题通常是由于资源路径配置不正确或打包过程中处理CSS样式的方式导致的。以下是一些解决此问题的方法： 1...
vue iview的菜单组件Mune 点击不高亮的解决方案
10-16
在Vue.js应用中，特别是在使用iView UI框架开发时，我们可能会遇到菜单组件Menu在点击后不显示高亮效果的问题。这个问题通常是由于Vue Router的配置或组件自身的样式冲突导致的。下面将详细介绍如何解决这个问题。 ...
iview 打包Icon不显示问题修复
尼伯特的博客
01-03 4377
iview 打包不显示问题修复 最近使用iviewUI框架开发应用，打包完成之后访问，发现所有的icon都报错不显示， 最终通过修改webpack配置文件修复，修改如下： 找到 build 目录下 webpack.prod.conf.js 文件， rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, ...
使用Vue2、iView-ui，项目build打包后icon图标不显示问题
qq_51758070的博客
07-14 839
使用Vue2、iView-ui，项目build打包后icon图标不显示问题
ivew图标icon在vue项目form表单中不能正常使用，有的能正常显示，有的不能显示
前端界的小学生
07-15 630
问题描述: ivew图标icon在vue项目form表单中不能正常使用，有的能正常显示，有的不能显示。 我使用iView的时候是从百度直接搜索的iView官网打开看的组件Api,但是有些icon组件图标就是一直不显示，而有些可以显示。 问题原因： 版本号不正确 后来去网上看了好几个文章都不能解决我的问题，最后在github上看到一个Isuse解决了。原来是百度搜到的iView官网默认是iView1.0的版本Api，而我代码中现在下载最新的是iView4.X的版本，所以Api肯定和1.0的版本对应不上。 其实
iView导航菜单Menu切换后图标不显示的问题处理
ghost的博客
07-21 1519
因为用惯了vue2.0，所以搭配iView还是使用的ViewUI，结果再想使用切换菜单时发现官方给的例子出现图标不显示的bug，不知道Plus会不会出现这个问题。
解决vue-cli+iview项目打包上线之后图标不显示问题
Linho的博客
10-15 1050
做vue项目使用的iviewUI库，打包上线之后发现icon都不显示，然后做了很多尝试，更改打包路径等，都没有太好的效果，最后还是在网上找到了方法： 1. 方法一： 在build/utils.js下面找到这段代码，将其中publicPath改成…/…/，保存并重新打包。注意：这个路径不是绝对的，根绝自己的目录结构来写 // Extract CSS when that option is spec...
iview如何使用组件导航菜单
06-08
要在 iView 中使用组件导航菜单，你可以按照以下步骤进行： 1. 首先，你需要安装 iView。你可以通过 npm 安装 iView： ``` npm install iview --save ``` 2. 在你的项目中引入 iView 组件和样式： ```javascript import Vue from 'vue'; import iView from 'iview'; import 'iview/dist/styles/iview.css'; Vue.use(iView); ``` 3. 然后，在你的 Vue 组件中使用 `Menu` 组件创建菜单，并添加 `Menu-Item` 或 `Submenu` 组件作为子菜单： ```html <template> <Menu :theme="theme" :active-name="activeName" :open-names="openNames" @on-select="handleSelect"> <Menu-Item name="1"> <Icon type="ios-navigate"></Icon> <span slot="title">导航一</span> </Menu-Item> <Submenu name="2"> <template slot="title"> <Icon type="ios-keypad"></Icon> <span>导航二</span> </template> <Menu-Item name="2-1">选项1</Menu-Item> <Menu-Item name="2-2">选项2</Menu-Item> <Menu-Item name="2-3">选项3</Menu-Item> </Submenu> </Menu> </template> ``` 4. 在你的 Vue 组件中添加 `activeName` 和 `openNames` 这两个属性，并在 `handleSelect` 方法中更新这两个属性的值： ```javascript <script> export default { data() { return { theme: 'dark', activeName: '1', openNames: [] } }, methods: { handleSelect(name) { this.activeName = name; } } } </script> ``` 这样，你就可以使用 iView 的组件导航菜单了。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值