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. appium api笔记

    打印上下文driver.contexts打印当前上下文driver.contextdriver.current_context切换上下文driver.switch_to.context('WEBVIE ...

  2. CentOS7 FTP安装与配置

    1.FTP的安装 #安装yum install -y vsftpd #设置开机启动systemctl enable vsftpd.service #启动systemctl start vsftpd.s ...

  3. linux CentOS

    CentOS中由一般用户切换为root用户 1.打开终端,提示符为“$”,表明该用户为普通用户,此时,直接输su,回车,输入root密码,回车,就可以切换到root用户下,此时的提示符变为“#”. 注 ...

  4. 《Redis 命令操作》

    一:Redis 的启动与关闭 - 关闭指定端口的 Redis - redis-cli -p 9200 shutdown - 开启 Redis - redis-server redis.config 二 ...

  5. oracle解决导入高版本dmp报错问题:IMP-00058: ORACLE error 12547 encountered

    低版本oracle导入高版本的dmp时,导过的人都应该清楚,直接导入是会报错的,报错信息如下,其实解决这个问题很简单, 只要修改一下dmp内的版本号就可以了. 修改版本不能随便使用文本工具打开,否知会 ...

  6. VUE-010-通过声明式导航 router-link 传递 params 参数(路由 name 识别,请求链接不显示参数传递)

    在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,除了通过路由进行表单参数的传递,也可通过声明式导航 router-link 进行页面跳转和参数传递. 首先,配置页面跳转路由 ...

  7. Django---框架简介和工程搭建

    Django框架 一.Django介绍 二.Django工程搭建 回到顶部 一.Django介绍 1.简介    Django的主要目的是简便.快速的开发数据库驱动的网站.它强调代码复用,多个组件可以 ...

  8. 2018-2019-2 网络对抗技术 20165236 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165236 Exp2 后门原理与实践 一.实验内容 (3.5分) (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用soc ...

  9. 关闭 synactive guixt. 在sap gui的右上角一个标志里,将 active guixt 选项去掉即可。

    关闭 synactive guixt.  在sap gui的右上角一个标志里,将 active guixt 选项去掉即可.

  10. java中的类型转换

    java中的类型转换分为两种 自动类型转换 要实现数据的自动类型转换必须同时满足下面两个条件 两种数据类型彼此兼容 目标类型的取值范围大于原类型范围 强制类型转换 当两种数据类型彼此不兼容,或者说目标 ...