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字体库的更多相关文章

  1. 微信小程序如何引入外部字体库iconfont的图标

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, ...

  2. Vue引入第三方JavaScript库和如何创建自己的Vue插件

    一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...

  3. 小程序入坑(一)---如何引入iconfont 字体图标

    最近一直忙于日常任务,其实是懒癌又犯了..........不过因为自己的“懒癌”,“不思进取”给自己挖了不少坑. 一,小程序工具的安装 打开简易小程序的官网https://mp.weixin.qq.c ...

  4. vue引入iconfont阿里字体图标库以及报错解决

    下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader)  ,记得--save ...

  5. mpvue——引入iconfont字体图标

    前言 有问题可以随时提问,评论私信,只要我有时间我都会第一时间回复.当大家发现这篇文章不适用的时候烦请告知下,我好做好更改! 放置 下载好的字体图标放在static目录下,我是自己又创建了一个icon ...

  6. VUE 引入阿里图标库

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

  7. uni-app引入iconfont字体图标

    1 首先进入你的iconfont项目 很好, 看见圈圈的吗 , 我说蓝色的,记住了,选到这个 ,然后点击下载本地项目, 解压完就是这个了 ,然后把 圈起来的放到你的项目文件里面 ,记得引入的时候路径别 ...

  8. 转《vue引入第三方js库》

    一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins, ...

  9. vue 引入第三方字体包

    1.创建 style_css 文件夹,在当前文件夹下 新建 index.css  和  引入字体包. 2. 在build 目录下,设置 webpack.base.cong.js ,  在module ...

随机推荐

  1. ALM 中查看某个 test 的更改 history 历史

    ALM 中要查看某个 test 更改历史, 需要下面两个表: AUDIT_LOG and AUDIT_PROPERTIES ------- Get Test modification history ...

  2. sort 用法

      Sort函数有三个参数: (1)第一个是要排序的数组的起始地址. (2)第二个是结束的地址(最后一位要排序的地址) (3)第三个参数是排序的方法,可以是从大到小也可是从小到大,还可以不写第三个参数 ...

  3. [ipsec][crypto] IKEv2的协商交互分析

    一: 无论协商了什么样的加密算法.DH都交换一块长度为32byte的内存,作为key. IKE和esp的key,分别基于这块内存生成. 二: 当esp的算法协商没有指定dh group时,rekey将 ...

  4. VMware+CentOS7学习记录

    CentOS命令记录 1.su root 进入最高权限 2.cd  /位置       即进入该文件 3.中文与英文之间的切换:win+空格 添加中文的步骤:https://blog.csdn.net ...

  5. 关于VMware(虚拟机) 出现错误时处理办法

    我们在开发中难免会用到虚拟机.前段时间老有同学问我虚拟机报错解决办法,趁今天有空特随笔. 错误如下图 首先科普下VT是个啥? Intel VirtualTechnology(VT)既“虚拟化技术” V ...

  6. Python 中文分词(结巴分词)

    特点: 支持三种分词模式: 精确模式,试图将句子最精确地切开,适合文本分析: 全模式,把句子中所有的可以成词的词语都扫描出来, 速度非常快,但是不能解决歧义: 搜索引擎模式,在精确模式的基础上,对长词 ...

  7. python编写shell脚本

    模块 os模块和shutil模块主要用于在python中执行一些Linux相关的操作,其中 os.system(command) 可以直接运行Linux命令,如os.system('ls'). 不过, ...

  8. Windows —— cmd命令

    Windows —— cmd命令 cd 命令 进入cmd的默认目录:默认为 C:\Users\Administrator> 进入文件夹:cd 文件夹名 返回上一层目录:cd.. 切换目录: 清屏 ...

  9. Extjs6 modern formpanel 上传文件 问题

    要设置 enableSubmissionForm: false 否则chrome会报 Form submission canceled because the form is not connecte ...

  10. angular4脚手架搭建

    Angular4.X安装,创建 1.安装最新的nodejs(node -v ,npm -v) 2.新建文件夹(右键git bash here)npm install -g @angular/cli 3 ...