Vue如何使用iconfont（阿里图标库）

1、在iconfont上任意方式登录

2、选择图标管理下，我的项目

3、新建一个项目（如果已有项目可忽略）

4、创建好之后就可以找自己要用的图标，添加到自己的项目里

5、图标添加完毕后，再次回到我的项目里就可以看到自己的图标了

6、选择下载至本地，解压之后可以看到这些文件

7、把选中的文件（其他的可以不用）放到自己项目所需要的文件夹下

8、然后在main.js中全局引入对应的css文件

// 阿里图标库
import "@/assets/iconfont/iconfont.css";

9、在你所需要的地方使用图标

<i class="iconfont icon-password"></i>

备注：

也可以在字体的css文件里看到

也可以直接使用对应的js文件

Vue如何使用iconfont（阿里图标库）相关推荐

vue+element 使用iconfont (阿里图标库)
步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二): 准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出' 随便选一个自己想要的如图把鼠标移动 ...
vue中通过在线链接使用iconfont阿里图标库FontClass
看项目原来的都是将图标下载到本地,然后引入css文件.查了些文章也都是介绍的,先将图标下载到本地再导入. 那么在项目开发中,时不时就会需要加入新的图标.这时候每次都要重新将图标下载到本地再导入.觉得十 ...
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 2018-11-9更新 VX号: LJT-917 这是我的微信公众号全是技术文章: 1.傻瓜式引用:由于这种方法及其 ...
Vue本地引用Iconfont(阿里巴巴图标库) SVG及普通图标
1.本地src目录下,新建xxx文件夹,自定义文件夹名称.目录结构如下:fontSy对应svg,fontUn对应普通图标. 2.在iconfont上下载对应zip(正常icon和SVG),zip中包含 ...
优秀工具介绍之——Iconfont 阿里图标库
阿里妈妈MUX倾力打造的矢量图标管理.交流平台. 设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用. 官网地址: h ...
antd 阿里图标库扩展a-icon 图标
vue 项目中使用阿里图标库扩展antd 组件 icon 的图标第一步:创建图标库在https://www.iconfont.cn/ 创建自己的图标库,首相创建项目,然后把Svg 图标上传到该项 ...
使用在线链接阿里图标库（iconfont）(vue)
1.阿里图标库网址 https://www.iconfont.cn/ 2.搜索–>图标名称–>鼠标移入图标->加入购物车–>点击购物车–>添加至项目 2.点击Font c ...
vue中阿里图标库iconfont的设置
步骤基本使用 1 下载存放从阿里图标库中下载压缩包,解压开目录如下在vue项目的assets下创建font文件夹,把这些文件复制到font文件夹下,为了有条理再创建styles文件夹,目录如下 ...
Vue - 项目中使用iconfont（阿里图标库）
项目中如何使用iconfont(阿里图标库) 一. 登陆iconfont官网: https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击"图标管理"子目录 ...

Vue如何使用iconfont（阿里图标库）

Vue如何使用iconfont（阿里图标库）相关推荐

最新文章

热门文章