1.去阿里图标矢量图标库将想要的图标添加入库

2.再去库中将图标添加到项目。

3.再到我的项目中，选择，我这里采用的是将图标代码包下载到本地再引入到vue项目中。

4.在vue项目的assets文件夹下新建一个iconfont文件夹（名字随意），将刚刚下载下来的代码包中的iconfont.css、iconfont.eto、iconfont.svg、iconfont.ttf、iconfont.woff复制到iconfont文件夹下。

5.在main.js中全局引入iconfont.css。

6.之后就可以在项目中正常使用了

vue 引入阿里图标的更多相关文章

  1. VUE 引入阿里图标库

    本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下, https://element.eleme.cn/#/zh-CN/component/icon 使用时: ...

  2. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  3. vue 外卖app(3) 引入阿里图标

    1.登陆阿里图标官网 2.点击搜索按钮,输入你想要搜索的图标,加入购物车,保存到项目中 3.在项目中使用

  4. VUE引入字体图标库

    1. 下载阿里图标 2. 解压文件,并复制文件到VUE项目内 3. 找到添加的字体图标的.css文件,将.iconfont改成[class^="iconfont"], [class ...

  5. 前端学习笔记系列一：5 在项目中引入阿里图标icon

    进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图 ...

  6. Vue引用阿里图标库

    首先进入官网http://www.iconfont.cn/ 转载:https://blog.csdn.net/qq_34802010/article/details/81451278 选择图标库 在里 ...

  7. react+antd引入 阿里图标

    import iconfont from '../../../../assets/fonts/iconfont.js' const Iconfont = Icon.createFromIconfont ...

  8. uni-app 引入本地iconfont的正确姿势以及阿里图标引入

    1.引入本地iconfont iconfont文件里面包含 iconfont.ttf.iconfont.css, 将 iconfont.tt64文件转位 base64.推荐转换工具地址:https:/ ...

  9. Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

    我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...

随机推荐

  1. CodeForces 711D Directed Roads (DFS找环+组合数)

    <题目链接> 题目大意: 给定一个$n$条边,$n$个点的图,每个点只有一条出边(初始状态),现在能够任意对图上的边进行翻转,问你能够使得该有向图不出先环的方案数有多少种. 解题分析: 很 ...

  2. 【Vue 2.X】基于input[type='number']封装parseFloat、parseInt-自定义指令系列（一）

    一.parseFloat 效果:限制负值输入,且输入值不为空时自动保留两位小数,等同于js的parseFloat(value).toFixed(2) 使用:与v-model配合使用,v-parseFl ...

  3. Python Web开发:Django+BootStrap实现简单的博客项目

    创建blog的项目结构 关于如何创建一个Django项目,请查看[Python Web开发:使用Django框架创建HolleWorld项目] 创建blog的数据模型 创建一个文章类 所有开发都是数据 ...

  4. swagger集成到springBoot 项目中

    1 pom 文件加包依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>spring ...

  5. bzoj1190 [HNOI2007]梦幻岛宝珠 背包

    题目 https://lydsy.com/JudgeOnline/problem.php?id=1190 题解 好神仙的一道题啊. 既然 \(w_i = a_i\cdot 2^{b_i}\),那么不妨 ...

  6. ubuntu 彻底删除软件

    无法获取 dpkg 前端锁 解决办法如下:1.终端输入 ps  aux ,列出进程.找到含有apt-get的进程,直接sudo kill PID. 2.强制解锁,命令sudo rm /var/cach ...

  7. 第二节：链接mongodb服务器

    查看mongodb的使用说明 版本是3.6.0 options 选项 指的是用户名和密码 address 数据库地址  数据库格式是 ip:端口/数据库 192.168.0.5:999/foo 链接本 ...

  8. webRTC脱坑笔记（二）— webRTC API之MediaStream(getUserMedia)

    webRTC API WebRTC API包括媒体捕获.音频视频的编码和解码.传输层和会话管理. getUserMedia():捕获音频和视频. MediaRecorder:录制音频和视频. RTCP ...

  9. Python的list中的选取范围

    a = [1,2,3,4,5,6,7,8,9,10] a[0:1] = [1] a[0:2] = [1,2] 包含开头,不包含结尾. a [:-1]: 从头一直到最后一个元素a[-1],但不包含最后一 ...

  10. js 运动框架-轻量级

    具体代码如下: function move(obj,json,sv,fnEnd){ //CSS样式值 function getStyle(obj,attr){ if(obj.currentStyle) ...