在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. ...
随机推荐
- 沙箱测试环境配置AND证书添加
支付宝SDK接口项目Demo测试 一.进入支付宝开放中心 下载密钥生成器 https://developers.alipay.com/developmentAccess/developmentAcce ...
- zabbix4.4 (server,proxy,agent)安装部署实战
一. 部署架构图 二. 安装环境及版本信息 操作系统:centos7 zabbix版本: 4.4 mysql: 5.7.28 三.zabbix server安装(192.168.182.132) rp ...
- Linux 系统中部署 LNMP 高可用负载均衡架构集群实现动态博客
(一)设计思路 高可用:keepalived 解决方案 负载均衡:(lvs)DR做轮询,需要一个调度器,后端节点两个(部署nginx动态博客),通过一个vip去访问动态博客 后端节点需要部署动态博客作 ...
- LeetCode_38. Count and Say
38. Count and Say Easy The count-and-say sequence is the sequence of integers with the first five te ...
- 利用PHP应用程序中的远程文件包含(RFI)并绕过远程URL包含限制
来源:http://www.mannulinux.org/2019/05/exploiting-rfi-in-php-bypass-remote-url-inclusion-restriction.h ...
- charles 文件菜单总结
本文参考:charles 文件菜单总结 一.file(文件菜单) 需要注意的是 "导入"和"导出"这个功能在和别人沟通的时候用, 比如你向第三方工具/类库开发人 ...
- charles 新的修改请求
本文参考:charles 新的修改请求 compose New 是新出一个弹窗,自己手动一个个的去写: 可以写各种状态: – URL: – Method: – GET – POST – PUT – D ...
- unity, 替换shader渲染(Rendering with Replaced Shaders)【转】
实现特效,尤其是一些后处理特效,经常需要将各物体的shader替换为另一套shader进行渲染到纹理,再后再进行合成或以某种叠加方式叠加到最后的画面上去. 再复杂一点儿的,可能不同的物体所用的替换sh ...
- Object Detection in 20 Years: A Survey【持续更新中】
原文:https://www.cnblogs.com/zhaojunjie/p/10886099.html 论文链接:https://arxiv.org/pdf/1905.05055.pdf 1. 引 ...
- 安卓AES加密
一:什么是AES加密 AES高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准. ...