Vue引用阿里图标库
首先进入官网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(iconfont.woffXXXX)←这种样子的,可以直接设置相对路径,所以我直接将woff文件与CSS放在一起,这样是可以的。
改后的路径如上图↑
之后就可以直接调用了
类似这样:
PS:如果遇到下图的问题:
解决方法:npm install css-loader --save
Vue引用阿里图标库的更多相关文章
- VUE 引入阿里图标库
本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下, https://element.eleme.cn/#/zh-CN/component/icon 使用时: ...
- 阿里图标库iconfont入门使用
目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...
- 开发辅助 | 阿里图标库iconfont入门使用
目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...
- 在vue项目中引入阿里图标库小记
使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...
- 【vue.js】vue项目使用Iconfont(阿里图标库)
vue项目使用Iconfont(阿里图标库) 2019-11-12 19:07:02 by冲冲 1.操作步骤 ① 登录阿里巴巴矢量图标库 https://www.iconfont.cn ,注册账号 ...
- 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)
1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...
- flutter 引入第三方 Icon 图标(以阿里图标库为例)
在fluttter中引入第三方图标库的具体方法: 1.在阿里图标库选好需要用的图标,添加进购物车将选好的图标打包下载到本地(下载代码),复制iconfont.ttf文件到项目中 2.存放途径:lib/ ...
- 小程序中使用阿里图标库iconfont
小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...
- 在引用阿里云库或其他库的时候,经常发生框架不兼容(原因是系统采用:Microsoft .NET Framework 4 Client Profile ),请改为Microsoft .NET Framework 4
在引用阿里云库或其他库的时候,经常发生框架不兼容(原因是系统采用:Microsoft .NET Framework 4 Client Profile ),请改为Microsoft .NET Frame ...
随机推荐
- notepad++ 快捷键运行python程序目录存在空格的问题
通常情况下 cmd /k (python.exe文件所在路径) "$(FULL_CURRENT_PATH)"&PAUSE&EXIT 就ok了,路径里有空格就不一样了 ...
- ZTMap室内地图定位平台设计方案
1 系统总体设计 1.1 系统概述 基于臻图信息室内GIS地图平台和室内定位平台,通过室内定位设备的部署和信号采集,实现对室内人员和资产的实时定位.路线导航.区域管控告警.客流统计等相关功能. ...
- 【vue】---- v-model在自定义组件中的使用
1. v-model简介 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定,它的本质是一个语法 ...
- vue基础----组件通信(props,$emit,$attrs,$listeners)
一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. 2>在子组件中通过props声明希望用到的数据 <body> <div id= ...
- python3:input() 函数
一.知识介绍: 1.input() 函数,接收任意输入,将所有输入默认为字符串处理,并返回字符串类型: 2.可以用作文本输入,如用户名,密码框的值输入: 3.语法:input("提示信息:& ...
- hdu(杭电oj)输入输出练习题目总结
1000.1001 .1089.1090.1091.1092.1093.1094.1095.1096
- created:异步初始化数据都应该放到 created里面
created:异步初始化数据都应该放到 created里面
- python-参考书
真的是找了很多的参考书,但是看懂,上手用的就一本比较好的<编程小白的第1本python入门书>非常的好. 属于那种一看就懂,能说明白的.别的,要么就是翻译的外文的,有点难以理解,要么就是中 ...
- CSS每日学习笔记(3)
8.1.2019 1.CSS伪类:用于向某些选择器添加特殊的效果. 伪类的语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用. a ...
- Kubernetes实战总结 - 系统初始化
设置系统主机名以及Host文件的相互解析 hostnamectl set-hostname k8s-master01 cat >> /etc/hosts <<EOF 192.1 ...