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. TCL自动化之SSH交互式

    目前ssh工具很多,但是能够轻松运用到自动化脚本中,可以轻松适配任何环境,满足ssh交互式登录的tcl工具包很少 下面是个人在tcl自动化过程中比较满意的一款自动化脚本 通过使用管道方式分装plink ...

  2. 完善Hikari连接池扩展项目HikariApi（ORM）

    以前介绍类自定义的Hikari项目,定位于数据库连接池:后扩展了,根据文件名称,以数据库配置文件为基础,支持按照名称多数据操作. 在使用中,发现扩展了SQL语句参数化操作,在管理类中,以扩展方法存在. ...

  3. 基于Xilinx Zynq的计算处理平台

    基于Xilinx Zynq XC7Z045 FFG 900的高性能计算模块 本模块基于Xilinx公司的FPGA XC7Z045 FFG 9000 芯片, 支持64bitDDR3, 容量2GByte: ...

  4. Git--03 git分支

    目录 Git分支 1.新建testing分支 2.合并分支 3.合并冲突 4.删除分支 Git标签使用 1.查看标签 02.删除标签 Git分支 ​ 分支即是平行空间,假设你在为某个手机系统研发拍照功 ...

  5. kali Linux 入门(一)

    一.描述 1.基于Debian Linux 发行版 2013年3月13日 2.包含约600个安全工具 3.定制 安全稳定的内核 4.前身是BackTrack(2013年停止维护) 5.官方机构:Off ...

  6. HTML5:Canvas-绘制图形

    到本文的最后,你将学会如何绘制矩形,三角形,直线,圆弧和曲线,变得熟悉这些基本的形状.绘制物体到Canvas前,需掌握路径,我们看看到底怎么做. 栅格 在我们开始画图之前,我们需要了解一下画布栅格(c ...

  7. Ehcahe独立使用

    <?xml version="1.0" encoding="utf-8"?><ehcache xmlns:xsi="http://w ...

  8. 特斯拉通过GitHub发布了这些源代码，用意何在？

    特斯拉多年来一直在软件社区使用开源软件而不遵守许可证. 在迈向合规性的一步中,特斯拉现在正在发布其软件的一些部分,这对特斯拉黑客和安全研究人员来说非常有用. 特斯拉是一家软件强大的公司,它一直在使用大 ...

  9. java Map的四种遍历方式

    1.这是最常见的并且在大多数情况下也是最可取的遍历方式,在键值都需要时使用. Map<Integer, Integer> map = new HashMap<Integer, Int ...

  10. cmd美化

    原本的cmd 虽然原本的cmd很简约黑底白字,但是看久了也会视觉疲劳 美化(丑化) 打开cmd右键头部选择属性 字体选项这里可以修改字体的大小和选择字体,修改之后下方会有预览,颜色选项这里点选屏幕文字 ...