首先进入官网http://www.iconfont.cn/

转载:https://blog.csdn.net/qq_34802010/article/details/81451278

选择图标库

在里面选择你喜欢的图标,加入购物车(右上角),然后点击购物车添加至项目下载到本地【网上这部分教程太多,而且官网界面简单也很好理解。】

将下载下来的压缩包解压到本地。绿色箭头的不需要,只需要红色和黄色方框内的。

找到Vue项目路径,在assets路径下新建文件夹Iconfont,将文件复制粘贴到项目里【命名看个人】

修改main.js:   import './assets/Iconfont/css/iconfont.css'(注意路径问题)【自行改为自己的iconfont.css路径】

修改文件路径:这四个文件都是绝对路径需要修改。

在iconfont.css里修改路径

注意:

url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKUAAsAAAAABlw)不需要更改路径

最开始是上图,因此无法添加我想要的相对路径,网上有些图片是url(iconfont.woffXXXX)←这种样子的,可以直接设置相对路径,所以我直接将woff文件与CSS放在一起,这样是可以的。

改后的路径如上图↑

之后就可以直接调用了

类似这样:

<i class="icon iconfont"></i> 从demo中直接调用;

PS:如果遇到下图的问题:

解决方法:npm install css-loader --save

Vue引用阿里图标库的更多相关文章

  1. VUE 引入阿里图标库

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

  2. 阿里图标库iconfont入门使用

    目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...

  3. 开发辅助 | 阿里图标库iconfont入门使用

    目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...

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

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

  5. 【vue.js】vue项目使用Iconfont(阿里图标库)

    vue项目使用Iconfont(阿里图标库) 2019-11-12  19:07:02  by冲冲 1.操作步骤 ① 登录阿里巴巴矢量图标库 https://www.iconfont.cn ,注册账号 ...

  6. 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)

    1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...

  7. flutter 引入第三方 Icon 图标(以阿里图标库为例)

    在fluttter中引入第三方图标库的具体方法: 1.在阿里图标库选好需要用的图标,添加进购物车将选好的图标打包下载到本地(下载代码),复制iconfont.ttf文件到项目中 2.存放途径:lib/ ...

  8. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  9. 在引用阿里云库或其他库的时候,经常发生框架不兼容(原因是系统采用:Microsoft .NET Framework 4 Client Profile ),请改为Microsoft .NET Framework 4

    在引用阿里云库或其他库的时候,经常发生框架不兼容(原因是系统采用:Microsoft .NET Framework 4 Client Profile ),请改为Microsoft .NET Frame ...

随机推荐

  1. notepad++ 快捷键运行python程序目录存在空格的问题

    通常情况下 cmd /k (python.exe文件所在路径) "$(FULL_CURRENT_PATH)"&PAUSE&EXIT 就ok了,路径里有空格就不一样了 ...

  2. ZTMap室内地图定位平台设计方案

    1   系统总体设计 1.1  系统概述 基于臻图信息室内GIS地图平台和室内定位平台,通过室内定位设备的部署和信号采集,实现对室内人员和资产的实时定位.路线导航.区域管控告警.客流统计等相关功能. ...

  3. 【vue】---- v-model在自定义组件中的使用

    1. v-model简介 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定,它的本质是一个语法 ...

  4. vue基础----组件通信(props,$emit,$attrs,$listeners)

    一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. 2>在子组件中通过props声明希望用到的数据 <body> <div id= ...

  5. python3:input() 函数

    一.知识介绍: 1.input() 函数,接收任意输入,将所有输入默认为字符串处理,并返回字符串类型: 2.可以用作文本输入,如用户名,密码框的值输入: 3.语法:input("提示信息:& ...

  6. hdu(杭电oj)输入输出练习题目总结

    1000.1001 .1089.1090.1091.1092.1093.1094.1095.1096

  7. created:异步初始化数据都应该放到 created里面

    created:异步初始化数据都应该放到 created里面

  8. python-参考书

    真的是找了很多的参考书,但是看懂,上手用的就一本比较好的<编程小白的第1本python入门书>非常的好. 属于那种一看就懂,能说明白的.别的,要么就是翻译的外文的,有点难以理解,要么就是中 ...

  9. CSS每日学习笔记(3)

    8.1.2019 1.CSS伪类:用于向某些选择器添加特殊的效果. 伪类的语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用. a ...

  10. Kubernetes实战总结 - 系统初始化

    设置系统主机名以及Host文件的相互解析 hostnamectl set-hostname k8s-master01 cat >> /etc/hosts <<EOF 192.1 ...