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. Android手机、电视(盒子) 打开ADB调试 一览表

    手机.电视(盒子) 打开ADB调试 一览表 一.手机打开ADB调试方法 序号 名称 描述 方式 1 华为手机 EMUI 1.设置 ->关于手机-> 版本号 点击(4~5次)2.返回设置 - ...

  2. windows下安装oracle11g

    第一步:一定要先做这一步. Oracle11g 安装过程出现提示:未找到文件 D:\app\Administrator\product\11.2.0\dbhome_2\owb\external\oc4 ...

  3. SELECT - 从表或视图中取出若干行

    SYNOPSIS SELECT [ ALL | DISTINCT [ ON ( expression [, ...] ) ] ] * | expression [ AS output_name ] [ ...

  4. 几种激活Profile的方式

    方法一: 选择spring.profiles.active spring.profiles.active=prodspring.profiles.active=dev 方法二: 选择spring.pr ...

  5. 【挖坟】HDU3205 Factorization

    分圆多项式 问题在于精度貌似出了一些奇怪的问题... [输出也写的有问题QAQ] 完全不会处理了 加上全网没有题解T^T 挖个坑以后补.. #include<cstdio> #includ ...

  6. Java EE模式和MVC

    Java EE模式 什么是模式? 开发过程中总结出来的约定俗成的"套路". Java EE经历的模式 model1模式 技术组成:JSP+JavaBean model1的弊端:随着 ...

  7. Hadoop中的排序和连接

    MapReduce的全排序 主要是为了保证分区排序,即第一个分区的最后一个Key值小于第二个分区的第一个Key值 与普通的排序仅仅多一个自定义分区类MyPartitioner见自己所写的实验 (设置一 ...

  8. zoj 3325 Machine（线段树）

    题意:0~n-1的数组,初始值为0:执行m个操作,每次操作执行后输出当前值为0的连续段的段数. 操作1: p i j : i~j区间的每个元素值减1 操作2: r i j :i~j区间的每个元素值加1 ...

  9. Web核心之会话技术Cookie&Session

    什么是会话技术? http协议是无状态协议.为了满足在多次请求之间数据进行交互,推出了会话技术. 会话概念:一次会话,指的是从客户端和服务器建立起连接开始,到客户端或服务器断开连接为止.中间可能进行多 ...

  10. boost location-independent times

    The class boost::posix_time::ptime defindes a location-independent time. It uses the type boost::gre ...