在Iview-admin中添加iconfont

于 2021-01-28 15:30:42 发布
阅读量331 收藏 1
点赞数
分类专栏： 问题解决 文章标签： javascript vue.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45715529/article/details/113342549
版权

1. 在iconfont官网中选择所需icon，选择下载代码

在这里插入图片描述

2.解压文件后选择下面四个文件，添加到src/assets/icons中，注意修改名称防止覆盖

在这里插入图片描述

3. 打开下载文件中的iconfont.css文件， 将下列代码复制到在src/assets/icons/iconfont.css文件中

在这里插入图片描述

4. 最后便可在所需位置使用引入的icon

<Icon custom='iconfont .icon-bandui' :size="38" style="color: white; margin-bottom: 2px" />
奇多Cheeto
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iconfont引入iview-admin
bss_object的博客
10-08 498
1.登录你自己的github账号进入到iconfont官网 2.搜索你想要的图标 加入购物车 ，再加入购物车之前你先见一个自己的仓库 然后把自己想要的想要的图标全部添加进去，然后选择Font class 点击下载到本地 3. 下载完之后解压，之后选择带有iconfont的文件添加到你的样式文件下面修改你的引入路径 4. 再在main.js文件里面引入 5. 然后就可以用了 用的时候记得前面要加...
vue+iView 引入iconfont
lvdou1120101985的博客
09-28 8449
iView本身的图标不是很多，所以在选择图标的时候翻出了收藏了好久的iconfont~ iconfont是阿里出品的开源图标库，有非常多的图标，兼具美观和全面，非常适合找图标~ 网址：iconfont官网 一、引入单色图标 1. 新建项目    2. 选择喜欢的图标加入购物车，将鼠标放在喜欢的图标上面就会显示菜单。 3. 将购物车的图标加入项目； 点击右上角的“购物车”按钮弹出...
iview-admin icon等控件点击无效
sun
12-18 211
将@click更改为@click.native即可
iview-admin使用Iconfont-阿里巴巴矢量图标库的时候，多个Iconfont合并如何使用
wei1992_6的博客
04-26 4298
1.实现的效果 (1)在项目的左侧菜单上的实现的效果 (2)在页面上的button按钮上实现的效果 2.Iconfont-阿里巴巴矢量图标库的下载 (1)Iconfont下载地址:https://www.iconfont.cn (2)如果需要多个图标，最好全部下载好再合并，不然每下载一次就要合并一次，很麻烦,本次只合并两个，分别是测试图标和按钮图标，Iconfont合并只需要下载svg文件 ...
ivue-admin中自定义图标问题进行处理（续）
I'm LINKSINKE
12-25 620
vue-admin中自定义图标问题进行处理（续） 接着上篇文章谈到的 vue-admin中自定义图标问题进行处理 问题，这篇是在上篇的基础之上来分析这个图标的class命名上自定义，因为他这个vue-admin针对用户自定义图标的演示是导入的iconfont图标，如果不是iconfont图标文件，而是其他的图标文件，比如说fontawesome、glyphicons呢？那不就完全被加上了iconf...
iview-admin登录完整代码附后台代码
12-12
在本项目中，开发者根据iview-admin的最新版本实现了登录功能，意味着该代码是与iview-admin的最新特性相匹配的。 2. Token认证：Token认证是一种常见的身份验证机制，用于保护Web应用和API。在登录成功后，服务器...
iview-admin
08-16
iview-admin 好多人在 GitHub 下不下来，这块提供下载包
iview-admin2.3.0 技术文档.docx
07-10
在 `iview-admin` 中，每个路由的 `meta` 字段可以自定义多个参数，比如： - `hideInMenu`: 控制页面是否在左侧菜单显示。 - `showAlways`: 如果设置为 `true`，即使只有一个子路由，父级菜单也会在菜单中显示。 ...
iview-admin-master 2.zip
04-16
View admin 是基于 Vue.js，搭配使用 iView UI 组件库形成的一套后台集成解决方案,由 TalkingData 前端...iView admin 遵守 iView 设计和开发约定，风格统一，设计考究，并且更多功能在不停开发中。很好用分享给大家
iview-admin-template.zip
最新发布
11-28
【iView-admin-template.zip】是一个压缩包文件，包含了一个基于Vue.js框架的后台管理系统前端模板——iView-admin。iView-admin是iView生态系统的一部分，它为开发者提供了构建高效、美观的管理界面的工具，适用于...
vue-element-admin之修改侧边栏的icon图标
weixin_40571937的博客
08-05 5600
修改侧边栏的icon图标 如果在vue-element-admin官方提供的icon库中没有我们需要的图标，可以到https://www.iconfont.cn/上选择并生成自己的业务图标库 1. 在vue-element-admin官方提供的icon库中找图标。 在vue-element-admin指南中可以看到这句话，我们来实际操作一波 2. 在iconfont网站上 在图标仓库里可以搜索我们需要的图标 把我们下载的icon图标的svg文件复制到/src/icons/svg文件夹下 在如图所示，
解决iview菜单使用iconfont图标无法显示的问题
热门推荐
lvdou1120101985的博客
09-28 1万+
写在前面： 首先，我出现问题的场景是使用在导航菜单上，即 Menu Item； 其次，我是使用json文件递归生成的菜单列表，在meta属性中设置的icon；   今天在使用iconfont的图标作为菜单的图标时发现总是显示成方框框 使用方法和设置Button的图标是一样的，检查了好久也没有发现问题，百思不得其解…… 使用F12检查元素，发现原来框架是在样式前面加上了 iv...
在iview + vue项目中使用自定义icon图标
lianwenxiu的博客
05-13 1万+
最近做一个后台管理系统，是用iview+vue cli2做的，在做的过程中需要将左侧的导航栏加入icon图标，但是iview库里的图标和UI要求不符，这就需要引入自己的图标库。 1. UI设计师会把自己做的图标库上传到阿里巴巴图标库，打开设计师给的图标库地址，把所有要用到的图标点击加入购物车 2. 到购物车中点击添加至项目 3. 给项目起个名字，点击确定，...
CDN 传统方式引入Iview icon不显示
HC1qq的博客
06-10 7562
因为需要字体文件可以在github上下载将文件下载之后放到fonts文件夹下   ，fonts 文件夹要与IView.css在同级目录
vue iview-admin使用教程之路由配置 -- 齐枭飞-web前端架构
一个来自外太空的游客
09-19 5765
功运行iview-admin之后，您就可以开始动手修改它，将自己的内容替换进去了。 首先最基础也是最重要的，应该说是路由配置，路由配置里目前有三种类型的配置，对应三种页面的展示 成功运行iview-admin之后，您就可以开始动手修改它，将自己的内容替换进去了。 首先最基础也是最重要的，应该说是路由配置，路由配置里目前有三种类型的配置，对应三种页面的展示类型。直接来看代码: ./src/route...
iview-admin table自定义expand组件
qq_35258268的博客
12-06 7238
由于iview-admin自带的table-expand组件是在table 行下面加了一个table，如果展开项需要和上级table展示列内容一致，则需要进行繁琐的样式修改。现可将展开项的data加在table data数组内，也可进行加载展开项list
vue中引入iconfont图标
archer的技术故事
11-15 9155
vue中引入iconfont图标 本文的主要目的是介绍如何在vue中引入iconfont图标。 1、首先需要登录iconfont官网。 http://www.iconfont.cn/ 2、选择喜欢的图标保存到自己的仓库中。 3、添加到购物车后，能够添加到项目中。 4、保存成功后，在自己的项目中就能够看到了 5、查看当前项目的
踩坑记——vue中引入iconfont字体图标
qq_40805816的博客
05-01 6270
在vue项目中引用字体图标——到字体图标网下载并引入在&lt;script&gt;标签中import './assets/icon/font-awesome.css'出现错误，如下解决方法把src下的icon文件夹改名为font，字体图标正常使用^^...
Vue组件实战之ivew源码Icon篇
小花的前端博客
02-06 3586
源码 template> i :class="classes" :style="styles">i> template> script> const prefixCls = 'ivu-icon'; export default { name: 'Icon', props: { type: String,

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值