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 ...
随机推荐
- 《Redis 使用规范》
一:Redis 概述 - Redis 是内存级别的数据库,在一台普通电脑上,Redis 3.X 便可以读取 10 万个键值对(现在的Redis官方版本已经更新到了5.X,性能会更好). 二:关于Red ...
- SoupUI 5.1.2(专业版)下载(含破解文件)
包内含原安装包和破解文件,仅用于技术交流,切勿用于商业用途. 安装教程参考:https://www.cnblogs.com/miaojjblog/p/9778839.html 安装包及破解文件下载地址 ...
- java中 16进制字符串 与普通字符串 与 byte数组 之间的转化
方法依赖commons-codec包 maven的引入方式如下 <dependency> <groupId>commons-codec</groupId> < ...
- 随手科技(随手记)2017招聘Java工程师笔试题
一 如何解决多台web服务器粘性会话的问题? 粘性session:web服务器会把某个用户的请求,交给tomcat集群中的一个节点,以后此节点就负责该保存该用户的session,如果此节点挂掉,那么 ...
- java.lang.IllegalStateException: Connection pool shut down
最近使用HttpClient 4.5 使用 CloseableHttpClient 发起连接后,使用CloseableHttpResponse 接受返回结果,结果就报错了,上网查了下,有位stacko ...
- 2019-04-20 Python之科学计算库学习总结
一.numpy库和matplotlib库的学习 (1)numpy库介绍:科学计算包,支持N维数组运算.处理大型矩阵.成熟的广播函数库.矢量运算.线性代数.傅里叶变换.随机数生成,并可与C++/Fort ...
- MongoDB系列----uupdate和数组
db.collection.update( criteria, objNew, upsert, multi ) criteria : update的查询条件,类似sql update查询内where后 ...
- java代码审计中的一些常见漏洞及其特征函数
文章来源:https://xz.aliyun.com/t/1633 最近在先知上看到之前有篇关于java代码审计的文章总结的蛮好,记录以下特征函数,方便查阅,同时自己也会将在平时代码审计过程中积累的函 ...
- #WEB安全基础 : HTTP协议 | 0x9 GET和POST请求以及请求URI的方式
请求URI的方式 1.URI为完整的请求URI GET http://hackr.jp/index.htm HTTP/1.1 2.在首部字段Host中写明域名或IP地址 GET/index.htm H ...
- 求你显示pdf
123 <iframe src='http://km.shengaitcm.com/ADC/_layouts/15/WopiFrame.aspx?sourcedoc=%2FADC%2FDocLi ...