vue 引入iconfont字体库
1.登录官网 https://www.iconfont.cn/
2.选择所需要的图标加入图库

新建项目 选择fontClass 并下载到本地 目录如下

3.项目 assets目录下 新建 iconfont 文件夹 并把所有的文件都复制过来(为了以后方便别人查阅) 打开 iconfont.css,添加如下代码:
[class^="icon"], [class*=" icon"] {
font-family:"iconfont" !important;
/* 以下内容参照第三方图标库本身的规则 */
font-size: 18px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
注意第二个class前面有个空格
4. 在 main.js添加
//引入字体库
import './assets/iconfont/iconfont.css'
模块中使用 : <i class="icon iconfont icon-filter"></i>

vue 引入iconfont字体库的更多相关文章
- 微信小程序如何引入外部字体库iconfont的图标
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, ...
- Vue引入第三方JavaScript库和如何创建自己的Vue插件
一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...
- 小程序入坑(一)---如何引入iconfont 字体图标
最近一直忙于日常任务,其实是懒癌又犯了..........不过因为自己的“懒癌”,“不思进取”给自己挖了不少坑. 一,小程序工具的安装 打开简易小程序的官网https://mp.weixin.qq.c ...
- vue引入iconfont阿里字体图标库以及报错解决
下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader) ,记得--save ...
- mpvue——引入iconfont字体图标
前言 有问题可以随时提问,评论私信,只要我有时间我都会第一时间回复.当大家发现这篇文章不适用的时候烦请告知下,我好做好更改! 放置 下载好的字体图标放在static目录下,我是自己又创建了一个icon ...
- VUE 引入阿里图标库
本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下, https://element.eleme.cn/#/zh-CN/component/icon 使用时: ...
- uni-app引入iconfont字体图标
1 首先进入你的iconfont项目 很好, 看见圈圈的吗 , 我说蓝色的,记住了,选到这个 ,然后点击下载本地项目, 解压完就是这个了 ,然后把 圈起来的放到你的项目文件里面 ,记得引入的时候路径别 ...
- 转《vue引入第三方js库》
一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins, ...
- vue 引入第三方字体包
1.创建 style_css 文件夹,在当前文件夹下 新建 index.css 和 引入字体包. 2. 在build 目录下,设置 webpack.base.cong.js , 在module ...
随机推荐
- 中国省份毗邻关系JSON数据[相邻省份][所辖市级信息][行政区划]
最近做一个需求, 需要一份每个省份相邻[毗邻]的省份信息,这里整理了一版. json 数据,结构大致这样子的. [ { "id": 7, "name": &qu ...
- Mysqlutil.JDBCutil.Dtabaseutil数据库操作工具类[批量操作]
一个用来操作数据库的常用工具类. 提供批量操作,生成建表,插入语句等 操作示例: // 1.获取连接 DataBaseUtil jdbc = new DataBaseUtil(); jdbc.getC ...
- LDAP与实现
LDAP是什么? LDAP是轻量目录访问协议,英文全称是Lightweight Directory Access Protocol,一般都简称为LDAP.它是基于X.500标准的,但是简单多了并且可以 ...
- 核心思想:决定你是富人还是穷人的11条标准(有强烈的赚钱意识,这也是他血液里的东西,太精彩了)good
原文地址:决定你是富人还是穷人的11条标准作者:谢仲华 1.自我认知 穷人:很少想到如何去赚钱和如何才能赚到钱,认为自己一辈子就该这样,不相信会有什么改变. 富人:骨子里就深信自己生下来不是要做穷人, ...
- Springboot-001-解决nested exception is org.apache.ibatis.binding.BindingException: Parameter 'env' not found. Available parameters are [arg1, arg0, param1, param2]
环境:Springboot + Mybatis + MySQL + VUE 场景: 前端发出数据比对请求,在服务后台与数据库交互时,接口提示错误信息如下所示: { "code": ...
- Luogu4113 [HEOI2012]采花
题目大意:给定一个长度为$n$的序列$a_i$,$m$次询问,每次询问$[l,r]$,求在区间内有多少个数出现了至少2次. 数据范围:$1\leq l\leq r\leq n\leq 2*10^6,1 ...
- c++ STL概述
2018-09-26 c++ STL(标准模板库)是一套通过c++模板类实现的标准类库,提供了通用的模板和函数,功能强大,大大的提高了c++的开发效率. c++ STL的核心主要包括三个组件:(1)容 ...
- JVM深入:JDK8-废弃永久代(PermGen)迎来元空间(Metaspace)(转)
转载自:https://www.cnblogs.com/yulei126/p/6777323.html 1.背景 2.为什么废弃永久代(PermGen) 3.深入理解元空间(Metaspace) 4. ...
- 导出IndoorGML
导出IndoorGML
- 潜在风险的频次vs潜在风险的严重影响的程度(以及恢复)
潜在风险的频次vs潜在风险的严重影响的程度 海量数据的存储对于海量数据,不要存在这样的侥幸心理,一定要好好设计你的系统.把数据增长后存储的影响降到最低.面对海量数据,鸡肋的设计必然会导致系统的崩溃. ...