介绍

在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. QML渐变色

    Rectangle { id: tab_btn width: height: parent.height color: "black" gradient: Gradient { G ...

  2. 生成对抗网络GAN详解与代码

    1.GAN的基本原理其实非常简单,这里以生成图片为例进行说明.假设我们有两个网络,G(Generator)和D(Discriminator).正如它的名字所暗示的那样,它们的功能分别是: G是一个生成 ...

  3. git rev-parse介绍;获取commit id

    git rev-parse master^{commit} 是什么意思 显示master提交的SHA1值 if you want to make sure that the output actual ...

  4. 利用 AWS 无服务架构之语音合成

    目录 一.架构图 二.服务部署 2.1.创建 DynamoDB 表 2.2.创建 S3 2.2.1 静态网页存储桶 2.2.2.音频存储桶 2.3.创建 SNS Topic 2.4.为 Lambda ...

  5. leetCode:twoSum 两数之和 【JAVA实现】

    LeetCode 两数之和 给定一个整数数组,返回两个数字的索引,使它们相加到特定目标. 您可以假设每个输入只有一个解决方案,并且您可能不会两次使用相同的元素. 更多文章查看个人博客 个人博客地址:t ...

  6. 【ZOJ】4012 Your Bridge is under Attack

    [ZOJ]4012 Your Bridge is under Attack 平面上随机n个点,然后给出m条直线,问直线上有几个点 \(n,m \leq 10^{5}\) 由于共线的点不会太多,于是我们 ...

  7. os路径

    import os linux下 例如: 我现在在 /home/settings.py文件下 # 获取当前的绝对路径 os.path.abspath(__file__) # 获取的内容 /home/s ...

  8. MongoDB 范围查询

    查询价格在200-9000    $gt  大于      $lt    小于 //查询价格200-9000范围的数据 db.prodgory.find({"}}) 查询给定范围数据   $ ...

  9. 控制层解析post请求中json数据的时候,有些属性值为空

    原因: 1.默认json数据解析的时候,值会赋给键的首字母是小写的封装的bean中的属性,如果没有首字母小写的属性,也不会报错.即bean中有getXXX方法时,从json到model会增加xxx属性 ...

  10. Linux系统下如何优雅地关闭Java进程?

    资料出处: http://www.sohu.com/a/329564560_700886 https://www.cnblogs.com/nuccch/p/10903162.html 前言 Linux ...