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. Python通过简单的文件读写，来实现注册登录

    # -*- coding:utf-8 -*- '''''' username = input('请输入您的姓名:') password = input('请输入密码:') with open('get ...

  2. L1-016 查验身份证 （15 分)【考细心，考flag设置】

    一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,10,5,8, ...

  3. Flask 接入第三方云通讯平台时出现 {‘172001’:’网络错误’}

    错误:{‘172001’:’网络错误’},经过上网查找原因,原来是 Python 升级到 2.7.9 之后引入了一个新特性,当打开一个 https 链接时,会验证一次 SSL 证书.而当目标网站使用的 ...

  4. Spark入门到精通--（第八节）环境搭建（Hadoop搭建）

    上一节把Centos的集群免密码ssh登陆搭建完成,这一节主要讲一下Hadoop的环境搭建. Hadoop下载安装 下载官网的Hadoop 2.4.1的软件包.http://hadoop.apache ...

  5. sudoers权限管理

    该/etc/sudoers文件的权限管理很完善,覆盖了linux中的各种命令,各种shell.编辑器等等,在此留作以后作为参考. # This file MUST be edited with the ...

  6. c++ STL概述

    2018-09-26 c++ STL(标准模板库)是一套通过c++模板类实现的标准类库,提供了通用的模板和函数,功能强大,大大的提高了c++的开发效率. c++ STL的核心主要包括三个组件:(1)容 ...

  7. jenkin如何实现web版本控制&回退

    jenkins本身作为一款运维利器,具备 1. 持续集成 (Continuous integration) 2. 持续交付(Continuous delivery) 3. 持续部署(continuou ...

  8. jquery-ui sortable 在拖动换位置时改变元素的大小导致占位与实际不一致

    使用jquery ui sortable时 需求是在拖动的时候要隐藏一部分元素,然后按照隐藏后的元素高度换位, 解决方案是修改源码jquery-ui.js, _mouseStart方法中开头增加 if ...

  9. new Date() 日期格式处理

    var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...

  10. [LeetCode] 115. Distinct Subsequences_ Hard tag: Dynamic Programming

    Given a string S and a string T, count the number of distinct subsequences of S which equals T. A su ...