在nuxt中引入Font Awesome字体图标库
介绍
在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库。
引入步骤
1.进入Font Awesome官方网址,下载字体库,官方网址:http://fontawesome.dashgame.com/
2.下载完成之后,对压缩包进行解压,放置项目中的assets文件夹下
3.在nuxt.config.js中添加配置
{
src: '~assets/font-awesome-4.7.0/css/font-awesome.min.css'
}
使用
1.在官方网站上,任意找一个图标样式,进行复制
、
2.复制完成之后,进行粘贴,得到的是“fa-thumbs-up”,我们将其用到展示页面上
<i class="fa-thumbs-up"></i>
3.此时,我们观察页面,发现页面上并没有显示对应的图标,只显示一个小框框。开始怀疑nuxt引入资源出错,又开始检查是否是font awesome内部字体库引用出错,发现都没有问题,后来发现是复制粘贴过来的样式前面缺少“fa”,导致引用失败。官网应该是最近更新的,之前的打开方式并非如此。由于比较相信官网没有注意这方面的问题,找了很久才发现是这个原因,这个坑应该很快会被修复。
4.正确的使用方式
<i class="fa fa-thumbs-up"></i>
5.这时,观察页面,发现图标已经显示正常
6.我们可以通过font-size和color属性来改变图标的大小和颜色
<i class="fa fa-thumbs-up" style="font-size: 30px;color: red"></i>
说明:本文为原创作品,若有参考会在文中提及,如有遗漏,涉及侵权,请联系本人,将立即修正。
在nuxt中引入Font Awesome字体图标库的更多相关文章
- Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标
文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...
- vue引入iconfont阿里字体图标库以及报错解决
下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader) ,记得--save ...
- (22)bootstrap 初识 + Font Awesome(字体图标库)
bootstrap作用就是简化布局 bootstrap是基于JQ的,所以内部代码使用的是jq语法 所以要使用bs,必须先倒入 1.head标签内倒入bs的css文件 <link rel=&qu ...
- Font Awesome字体图标
1.什么是字体图标字体图标是一个包含许多图标的字体库.可以理解为一种特殊的字体,只不过里面包含的都是图标. 2.Font Awesome图标字体库Font Awesome是目前最受欢迎最全面的图标字体 ...
- 扩展layui中的自带字体图标
项目中,虽然layui的字体图标库中已经有了1000多个图标了,但是也有时候不能满足我们自定义图标的需求,所以需要进行自定义,具体步骤如下: 1.在iconfont上找到自己喜欢的图标,也可以上传ui ...
- uni-app在线引入阿里字体图标库
第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...
- jQuery插件fontIconPicker配合FontAwesome字体图标库的使用
同样先上效果图: 怎么样,是不是很好看,jquery fontIconPicker这个插件做的很不错,支持分类,搜索,还有分页功能,可以自定义分页,具体的使用方法我就不一介绍了,我只说一下如何使用fo ...
- 字体图标库 iconfont、iconmoon 的维护管理与使用探索
字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里 ...
- css3 - 字体图标库使用方法
一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www. ...
随机推荐
- QML渐变色
Rectangle { id: tab_btn width: height: parent.height color: "black" gradient: Gradient { G ...
- 生成对抗网络GAN详解与代码
1.GAN的基本原理其实非常简单,这里以生成图片为例进行说明.假设我们有两个网络,G(Generator)和D(Discriminator).正如它的名字所暗示的那样,它们的功能分别是: G是一个生成 ...
- git rev-parse介绍;获取commit id
git rev-parse master^{commit} 是什么意思 显示master提交的SHA1值 if you want to make sure that the output actual ...
- 利用 AWS 无服务架构之语音合成
目录 一.架构图 二.服务部署 2.1.创建 DynamoDB 表 2.2.创建 S3 2.2.1 静态网页存储桶 2.2.2.音频存储桶 2.3.创建 SNS Topic 2.4.为 Lambda ...
- leetCode:twoSum 两数之和 【JAVA实现】
LeetCode 两数之和 给定一个整数数组,返回两个数字的索引,使它们相加到特定目标. 您可以假设每个输入只有一个解决方案,并且您可能不会两次使用相同的元素. 更多文章查看个人博客 个人博客地址:t ...
- 【ZOJ】4012 Your Bridge is under Attack
[ZOJ]4012 Your Bridge is under Attack 平面上随机n个点,然后给出m条直线,问直线上有几个点 \(n,m \leq 10^{5}\) 由于共线的点不会太多,于是我们 ...
- os路径
import os linux下 例如: 我现在在 /home/settings.py文件下 # 获取当前的绝对路径 os.path.abspath(__file__) # 获取的内容 /home/s ...
- MongoDB 范围查询
查询价格在200-9000 $gt 大于 $lt 小于 //查询价格200-9000范围的数据 db.prodgory.find({"}}) 查询给定范围数据 $ ...
- 控制层解析post请求中json数据的时候,有些属性值为空
原因: 1.默认json数据解析的时候,值会赋给键的首字母是小写的封装的bean中的属性,如果没有首字母小写的属性,也不会报错.即bean中有getXXX方法时,从json到model会增加xxx属性 ...
- Linux系统下如何优雅地关闭Java进程?
资料出处: http://www.sohu.com/a/329564560_700886 https://www.cnblogs.com/nuccch/p/10903162.html 前言 Linux ...