iview中使用阿里巴巴矢量图标库扩展Icon

最新推荐文章于 2023-12-22 10:30:28 发布
最新推荐文章于 2023-12-22 10:30:28 发布
阅读量793 收藏 1
点赞数
分类专栏： iview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43990297/article/details/108624636
版权
  1. 首先在阿里巴巴上选择自己需要使用的字体图标，然后添加至项目，我在这里使用的是font-class引用方式，（阿里巴巴矢量图标库还不会用的自行百度），如图
    在这里插入图片描述
    点击下载后解压
    在这里插入图片描述
    将圈中的文件放入你的项目中，一般放在static中新建个iconfont文件夹，放进去
    然后在main.js中引入
import '../static/iconFont/iconfont.css'

然后使用方式

<Icon custom="iconfont iconhexiaoqueren" size="24" />
// 或者  下面是原生使用方式  上面是与iview的icon组件结合使用
<i class="iconfont iconhexiaoqueren"></i>
喵大叔、
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用阿里巴巴的图标库拓展iview图标库
追逐丶的博客
05-09 1027
1 说明 2 下载阿里图标库压缩文件 3 引用文件 4 使用图标 注意一定要填写iconfont 作为其类名。否则无法识别图片 <Icon custom="iconfont icontriangle-bottom" /> ...
Iview Table组件中各种组件扩展的使用
12-09
一、Iview Table 组件 多选框选中和禁选设置 Table添加多选框 通过给 columns 数据设置一项，指定 type: ‘selection’ ，即可自动开启多选功能。 正确使用好以下事件，可以达到需要的效果： @on-select ，选中...
在vue中使用阿里图标库；在iview中使用阿里图标库；
weixin_33895516的博客
05-28 192
在vue中使用阿里图标库；在iview中使用阿里图标库； 图标库有三种使用方式（Unicode、Font class、Symbol），此处仅探讨 Font class 的使用方法（其他方法类似） 一、引入： 1. 解压图标文件 2. 修改css文件中的路径 在文件 iconfont.css 引入的地方加上 ./ 3. 全局引入iconfont 在main.js 中 import '@/...
iview 的table 加矢量图icon的方式
Quiet_123的博客
11-09 2883
iview+table+icon实现table中某一列添加图标。自己项目里遇到的问题，记录一下。 注意：table里的render函数的使用。 第一步：render函数 { title: '站名', key: 'name', // align:"c...
iconfont拓展iview图标库
最新发布
qq_34082921的博客
12-22 686
阿里图标Iconfont图标-功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。是阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。
通过阿里巴巴矢量图标库拓展boorstrap框架的图标库
橘子味''的博客
06-19 1127
【阿里巴巴矢量图表库的正确使用姿势】 说明 本文只是一篇抛砖引玉的文章，阿里巴巴矢量图标库真的是一个很棒的站点，他能够 让你通过文字搜索到很多现成的图标，并且可以指定这些图标的大小，图标格式。 font-class引用 现在很多的前端框架，都会携带自己的图表库，比如bootstrap的图标库 那么当这些图标不够用的时候怎么办？ 我想像调用bootstrap框架的图标一样，...
iview树添加图标
10-31
iview树添加图标
基于IView中on-change属性的使用详解
08-27
基于IView中on-change属性的使用详解 IView是一个基于Vue.js的UI组件库，它提供了许多实用的组件和指令，可以帮助开发者快速构建Web应用程序。在IView中，on-change属性是一个非常重要的属性，它可以用来监听输入框...
Vuex,iView UI面包屑导航使用扩展详解
12-30
本案例是基于Vuex的公共数据库，你在了解本案例之前要了解Vuex的使用方法。 https://www.iviewui.com/components/breadcrumb 打开网址我们可以知道这个组件的面包屑导航是基于路由跳转的。但是我们项目中常常用到单...
【微信小程序】使用iView组件库中的icons资源
资深全栈开发工程师
07-20 1406
组件库需要进行更多的配置和学习，具体的使用方法和组件属性请参考。组件库的路径，根据你实际的安装路径进行配置。组件库的源码或使用npm安装。这样就可以在微信小程序中使用。资源，需要先下载并引入。的文档进行配置和使用。要在微信小程序中使用。
Iconfont+IcoMoon 升级 iview2 图标库到 iview3 (打造自己的图标库)
汤一飞
12-10 1546
进入 IcoMoon , 导入 node_module 里装的 iview2 和 iview3 的 SVG 字体文件. IcoMoon 很简单, 不会弄可以自己上网查; 同理, node_module 里找到 iview 文件夹了慢慢找 fonts 里的 svg 文件, 基本上看着文件夹名字就知道在哪儿了 导入完成后, 先全选 3 版图标再全选 2 版图标, 选择导出, 导出时可以设置...
在iview + vue项目中使用自定义icon图标
热门推荐
lianwenxiu的博客
05-13 1万+
最近做一个后台管理系统，是用iview+vue cli2做的，在做的过程中需要将左侧的导航栏加入icon图标，但是iview库里的图标和UI要求不符，这就需要引入自己的图标库。 1. UI设计师会把自己做的图标库上传到阿里巴巴图标库，打开设计师给的图标库地址，把所有要用到的图标点击加入购物车 2. 到购物车中点击添加至项目 3. 给项目起个名字，点击确定，...
iview表格表头上添加icon图标
weixin_45850738的博客
03-02 2186
iview表格表头上添加icon图标 需求描述： 如图，在表格表头处添加icon图标，并且鼠标悬浮时有提示语。 解决方案： 使用iview表格中自带的 renderHeader 函数，其用法和 render 类似， 代码： <template> <div> <Table :columns="tableColumn" :data="tableData" class="honorTable"> <template
iview 如何建立图标库？前端开发，
jjj_fl的博客
12-04 2216
我是根据自己的实际项目写的流程，如有不一样请谅解···· 1. 首先准备一套png/jpg图标 2. png/jpg要转成矢量图.svg格式的失量图标 (1)线转不太好用：这是我自己找的一个工具Vector Magic破解版（能批量操作） https://pan.baidu.com/s/1xyKXhuKTl7-eOWA4DCNctA 提取码: h1wm 破解方法 解压后先点KEYGEN 1.15....
iview-admin使用Iconfont-阿里巴巴矢量图标库的时候，多个Iconfont合并如何使用
wei1992_6的博客
04-26 4295
1.实现的效果 (1)在项目的左侧菜单上的实现的效果 (2)在页面上的button按钮上实现的效果 2.Iconfont-阿里巴巴矢量图标库的下载 (1)Iconfont下载地址:https://www.iconfont.cn (2)如果需要多个图标，最好全部下载好再合并，不然每下载一次就要合并一次，很麻烦,本次只合并两个，分别是测试图标和按钮图标，Iconfont合并只需要下载svg文件 ...
iview的table组件怎么引入icon图标
teddyWithPig的博客
09-12 2284
iview的table组件怎么引入icon图标 1.使用iview自带的icon图标 columns: [{ title: '操作', key: 'Action', width: 150, render: (h, params) => { return h('div', [ h('Icon', { props: { typ
ivew button 使用自定义图标
chengmin123456789的博客
09-29 1156
Tooltip content="停用" transfer v-if="row.qy ==1" >
vue+iView 引入iconfont
lvdou1120101985的博客
09-28 8449
iView本身的图标不是很多，所以在选择图标的时候翻出了收藏了好久的iconfont~ iconfont是阿里出品的开源图标库，有非常多的图标，兼具美观和全面，非常适合找图标~ 网址：iconfont官网 一、引入单色图标 1. 新建项目    2. 选择喜欢的图标加入购物车，将鼠标放在喜欢的图标上面就会显示菜单。 3. 将购物车的图标加入项目； 点击右上角的“购物车”按钮弹出...
vue项目引入阿里巴巴矢量图标库步骤详解-推荐
一个超爱喝可乐的web前端攻城狮
03-31 2186
vue项目引入阿里巴巴矢量图标库步骤详解 第一步打开百度搜索阿里巴巴矢量图标库 官方网址:https://www.iconfont.cn/ 第二步在搜索框搜索你想要的图标点击购物车图标 或者直接下载png或者jpg图标(这种是图片方式引入); 第三步点开右上角的购物车按钮 第四步会出现一个右侧抽屉点击添加至项目(需要登录,按照自己喜欢的登录方式进行登录) 第五步点击下载至本地下面是你原来或者刚才选的icon图标 第六步,在vue项目中解压刚才的文件放入vue的静态资源库里 第七步在main点js

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值