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 ...
随机推荐
- appium api笔记
打印上下文driver.contexts打印当前上下文driver.contextdriver.current_context切换上下文driver.switch_to.context('WEBVIE ...
- CentOS7 FTP安装与配置
1.FTP的安装 #安装yum install -y vsftpd #设置开机启动systemctl enable vsftpd.service #启动systemctl start vsftpd.s ...
- linux CentOS
CentOS中由一般用户切换为root用户 1.打开终端,提示符为“$”,表明该用户为普通用户,此时,直接输su,回车,输入root密码,回车,就可以切换到root用户下,此时的提示符变为“#”. 注 ...
- 《Redis 命令操作》
一:Redis 的启动与关闭 - 关闭指定端口的 Redis - redis-cli -p 9200 shutdown - 开启 Redis - redis-server redis.config 二 ...
- oracle解决导入高版本dmp报错问题:IMP-00058: ORACLE error 12547 encountered
低版本oracle导入高版本的dmp时,导过的人都应该清楚,直接导入是会报错的,报错信息如下,其实解决这个问题很简单, 只要修改一下dmp内的版本号就可以了. 修改版本不能随便使用文本工具打开,否知会 ...
- VUE-010-通过声明式导航 router-link 传递 params 参数(路由 name 识别,请求链接不显示参数传递)
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,除了通过路由进行表单参数的传递,也可通过声明式导航 router-link 进行页面跳转和参数传递. 首先,配置页面跳转路由 ...
- Django---框架简介和工程搭建
Django框架 一.Django介绍 二.Django工程搭建 回到顶部 一.Django介绍 1.简介 Django的主要目的是简便.快速的开发数据库驱动的网站.它强调代码复用,多个组件可以 ...
- 2018-2019-2 网络对抗技术 20165236 Exp2 后门原理与实践
2018-2019-2 网络对抗技术 20165236 Exp2 后门原理与实践 一.实验内容 (3.5分) (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用soc ...
- 关闭 synactive guixt. 在sap gui的右上角一个标志里,将 active guixt 选项去掉即可。
关闭 synactive guixt. 在sap gui的右上角一个标志里,将 active guixt 选项去掉即可.
- java中的类型转换
java中的类型转换分为两种 自动类型转换 要实现数据的自动类型转换必须同时满足下面两个条件 两种数据类型彼此兼容 目标类型的取值范围大于原类型范围 强制类型转换 当两种数据类型彼此不兼容,或者说目标 ...