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. Spring学习笔记（14）——SpEL

    是什么 Spring表达式语言全称为"Spring Expression Language",缩写为"SpEL",类似于Struts2x中使用的OGNL表达式语 ...

  2. vue + element 创建教程

    一.环境准备 node安装 node版本:v10.15.3 node下载地址:https://nodejs.org/zh-cn/ vue-cli安装 全局安装vue-cli npm install - ...

  3. quota - 显示磁盘的使用和限额

    总览 (SYNOPSIS) quota [ -guv | q ] quota [ -uv | q ] user quota [ -gv | q ] group 描述 (DESCRIPTION) Quo ...

  4. python读取pcap包

    import struct class FileConvert(object): ''' test python file''' def __init__(self): self.aa = 0 sel ...

  5. VisualVM监控远程主机

    参考博客 https://blog.csdn.net/u010004317/article/details/82948040 https://blog.csdn.net/lienfeng6/artic ...

  6. Sass-@each

    @each 循环就是去遍历一个列表,然后从列表中取出对应的值. @each 循环指令的形式: @each $var in <list> 如果你没有接触过列表,也不要紧,他也非常简单. 在下 ...

  7. 消费者与生产者---LinkedList方式模拟

    采用LinkedList数据结构方式来模拟消费者与生产者模型,小Demo import java.util.LinkedList; public class MyQueue { private fin ...

  8. centos7安装nginx并配置web前端环境。

    1.安装nginx -sudo yum install nginx 2.启动nginx - systemctl start nginx 3.修改nginx路径配置,/etc/nginx/nginx.c ...

  9. error和exception的不同与相同

    Exception和Error的区别 两者的“异”&各自的概念: 1.error:error 是指在正常情况下,不大可能出现的情况,绝大部分的 Error 都会导致程序处于非正常的.不可恢复状 ...

  10. CDH6.3 Centos7

    按照官方文档安装即可 CentOS7 上搭建 CDH(6.3.0) 官方文档:https://docs.cloudera.com/documentation/enterprise/6/6.3/topi ...