vue中使用第三方阿里巴巴矢量图标库，并修改图标大小

从我写第一个vue页面开始，我就想用第三方的图标库了，实在是element-ui的图标库太浅了，能用的就那么几个。现在这个心病终于解决了

1.浏览器搜索阿里巴巴矢量图库iconfont

2.登录，可以使用新浪微博账户或者github账户

3.创建项目

项目创建完成后，点击购物车，然后选择加入项目即可

可以选择多个，选择完成后，再次点击资源管理，进入刚刚创建的项目，选择将加入项目的图标本地下载。

下载完成并解压后，有好多文件，我们只要以下5个即可

将上面的5个文件复制粘贴到vue-cli项目中的assets文件夹中，可以新建一个icon包用来装这些文件，比如我的项目：

找到项目中的main.js文件，导入iconfont.css样式

如果想要使用某个图标，可以打开iconfont.css文件，找到以下两个内容

然后如果想要使用的话，只需要这两个字符串就可以，第一个字符串不变，第二个字符串决定你使用哪个图标，如下：

如此这般，就可以成功使用第三方图标了。
ps:这两个内容的名字别乱改，在其他四个文件也有相关内容，要么不改，要么5个文件的都改。

如果直接使用，可能图标会太大或者太小

这里就太大了一点，以下是修改图标大小的方法

好了，以上就是“vue中使用第三方阿里巴巴矢量图标库，并修改图标大小”的全部内容了

–我是“道祖且长”，一个在互联网“苟且偷生”的java程序员

vue中使用第三方阿里巴巴矢量图标库，并修改图标大小相关推荐

Vue 中引用第三方js总结
vue中引用第三方js总结 By:授客 QQ:1033553122 实践环境 win10 Vue 2.9.6 本文以引用jsmind为例,讲解怎么在vue中引用第三方js类库基础示例 1.把下载好的 ...
【Vue-Element】矢量字体库iconfont字体图标库使用
矢量字体库iconfont字体图标库使用 1.注册并登录 2.图标管理 >> 我的项目 >> 新建项目 3.新建完成后,搜索我们想要的图标,然后添加到购物车 4.添加完成后,购 ...
vue中style的scoped属性这样用，修改第三方组件iview 或 element 样式
vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式文章目录 vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式 ...
png转iconfont_关于阿里图标库Iconfont生成图标的三种使用方式-新闻详情
关于阿里图标库Iconfont生成图标的三种使用方式发布时间:2017-07-28责任编辑:朱明浏览:1843 相信做过前端的都知道阿里巴巴矢量图标库,这是一个非常好用的添加小图标的方法,而且是完 ...
antd 阿里图标库扩展a-icon 图标
vue 项目中使用阿里图标库扩展antd 组件 icon 的图标第一步:创建图标库在https://www.iconfont.cn/ 创建自己的图标库,首相创建项目,然后把Svg 图标上传到该项 ...
如何在vue中引入阿里巴巴矢量图标库里面的图标
阿里巴巴矢量图标库https://www.iconfont.cn/ 首先进行登录,然后才能下载里面的图标搜索里面的图标并添加到购物车点击右上角购物车将购物车里面的图标添加至项目书写项目名称可随 ...
梳理详细 vue中引入第三方字体图标库iconfont
最近在项目中需要使用第三方图标库,我选择了阿里的iconfont.记录下学习过程.在网上查阅资料的时候,发现很多教程写的比较模糊,一些博主只是提供一种可实现的方式,但是并没有完全区分iconfont的 ...
vue中 element-ui引入阿里巴巴图标库两种办法
一:最初步骤,去阿里巴巴图标库. 过程:https://blog.csdn.net/mmd0308/article/details/78390783 二:配置: 1.在iconfont.css文件中将 ...
QT使用阿里巴巴矢量图标库设置窗口图标、菜单栏项图标、工具栏项图标、状态栏图标以及将控件设置为图标
在阿里巴巴矢量图标库官网上下载图标,具体操作在下方有讲解. 在QT项目中设置图标示例. 我总结了一下需要设置图标的地方大致分为5个,如下: 1. 设置窗口图标(利用setWindowIcon()属性实 ...
阿里巴巴矢量图标库批量下载图标
阿里巴巴矢量图标库是前端工程师常用到的一个网站.网址:阿里巴巴矢量图标库但是每次下载图标都要挨个点击一下下载按钮,页面不提供批量下载. 操作起来很不方便. 后来我在网上查询,总算找到批量下载的方法, ...

vue中使用第三方阿里巴巴矢量图标库，并修改图标大小

vue中使用第三方阿里巴巴矢量图标库，并修改图标大小相关推荐

最新文章

热门文章