介绍

在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字体图标库的更多相关文章

  1. Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标

    文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...

  2. vue引入iconfont阿里字体图标库以及报错解决

    下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader)  ,记得--save ...

  3. (22)bootstrap 初识 + Font Awesome(字体图标库)

    bootstrap作用就是简化布局 bootstrap是基于JQ的,所以内部代码使用的是jq语法 所以要使用bs,必须先倒入 1.head标签内倒入bs的css文件  <link rel=&qu ...

  4. Font Awesome字体图标

    1.什么是字体图标字体图标是一个包含许多图标的字体库.可以理解为一种特殊的字体,只不过里面包含的都是图标. 2.Font Awesome图标字体库Font Awesome是目前最受欢迎最全面的图标字体 ...

  5. 扩展layui中的自带字体图标

    项目中,虽然layui的字体图标库中已经有了1000多个图标了,但是也有时候不能满足我们自定义图标的需求,所以需要进行自定义,具体步骤如下: 1.在iconfont上找到自己喜欢的图标,也可以上传ui ...

  6. uni-app在线引入阿里字体图标库

    第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...

  7. jQuery插件fontIconPicker配合FontAwesome字体图标库的使用

    同样先上效果图: 怎么样,是不是很好看,jquery fontIconPicker这个插件做的很不错,支持分类,搜索,还有分页功能,可以自定义分页,具体的使用方法我就不一介绍了,我只说一下如何使用fo ...

  8. 字体图标库 iconfont、iconmoon 的维护管理与使用探索

    字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里 ...

  9. css3 - 字体图标库使用方法

    一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www. ...

随机推荐

  1. KDChart example

    /******************************************************************************** ** Form generated ...

  2. 123457123457#0#-----com.yuming.ZuiNiuChengYu--前拼后广--最牛成语

    com.yuming.ZuiNiuChengYu--前拼后广--最牛成语

  3. jQuery学习四——效果

    1.显示,隐藏: <!DOCTYPE html> <html> <head> <title>jquery事件</title> </he ...

  4. Jquery Ajax WebService

    仅供参考 ws.aspx 代码 <script type="text/javascript"> $(function () { $.ajax({ type: " ...

  5. RobotFramework:发现一个大坑,当post接口入参为json时,千万不能用sojson转化后的json串(ride解析会有异常,非sojson工具问题),直接用浏览器粘过来的就行

    问题背景: 和以往一样愉快的进行着自动化测试,突然就不停的提示我,“程序异常”,查看log发现data中的json变为了数组?????? 那算了,我不先组装入参数据直接data=json入参吧,wha ...

  6. pytest文档20-pytest-html报告优化(添加Description)

    前言 pytest-html测试报告默认是不展示用例描述Description内容,之前用unittest生成的报告是可以展示用例的描述,也就是test开头的用例下三个引号里面的注释(docstrin ...

  7. java基础系列(二):java数据结构及常用方法

    1.数组Array (1)创建数组 dataType[] arrayName = new dataType[length];必须指定大小,否则会报错:如果不想指定大小,应采用声明数组变量的方式 dat ...

  8. 删除Excel表格中一堆英文中的汉字

    昨天需要处理一个Excel文件,删除一堆英文里的汉字,开始搜了下方法,没找到,然后手动一个多小时,弄了一半吧也就,结果电脑卡了,忘了保存,就白做了...不知道为啥这次没有自动保存,所以,重要的事说三遍 ...

  9. 最新 蚂蚁金服java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.蚂蚁金服等10家互联网公司的校招Offer,因为某些自身原因最终选择了蚂蚁金服.6.7月主要是做系统复习.项目复盘.Leet ...

  10. (生鲜项目)06. django的view实现商品列表页

    使用原始的django的View来返回json格式的商品列表 目的是回顾一些django的基础知识, 好与后面的RESTful做对比 goods.views_base.py from django.v ...