登录|注册|帮助中心|联系我们

导航
首页 综合百科 生活常识 数码科技 明星名人 传统文化 互联网 健康 影视 美食 教育 旅游 汽车 职场 时尚 运动 游戏 家电 地理 房产 金融 节日 服饰 乐器 歌曲 动物 植物
当前位置:首页 > 互联网

阿里云icon图标(免费icon素材图标推荐)

发布时间:2023年1月5日责任编辑:林大生标签:阿里云免费icon素材

Element UI 是目前流行的一款前端UI工具。它能配合Vue这个流行的前端框架。安装使用也简单:npm i element-ui -S即可。不过美中不足的是自带的图标集合不够用,图标太少了。今天刚好碰到这个问题,现在来分享一下如何在Vue Element中使用阿里云矢量图标库。

???

element 自带图标库

一,注册阿里云图标库Iconfont,过程自行百度。

二,创建项目

???

三,添加图标到项目:首先在首页搜索需要的图标,然后添加到购物车,接着添加到指定的项目

??????

四,下载图标文件

???

五,将文件解压,复制到Vue项目:我是在Vue项目的src-assets下创建了icon文件夹,将所有的文件复制了过来

???

六,修改其中的iconfont.css文件:这里以引用icon-shouye图标为例

???

七,复制阿里云图标库中的所选图标的代码

???

八,重新编译Vue项目:npm run dev

九,引用图标:这里以我的el-button为例:

<el-button icon=”icon-shouye” size=”small” circle style=”background:#abd3ff”></el-button></div>

???

对比,这个小房子的图标是阿里云图标库的,在element自带的图标库并没有,至此,引用成功。

其它知识推荐

溜溜百科知识网——分享日常生活学习工作各类知识。 垃圾信息处理邮箱 tousu589@163.com
icp备案号 闽ICP备14012035号-2 互联网安全管理备案 不良信息举报平台 Copyright 2023 www.6za.net All Rights Reserved