nuxt中引入Font Awesome字体图标库

责编:menVScode 2018-09-29 10:48 阅读(50)

介绍

在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-address-book”,我们将其用到展示页面上

<i class="fa-address-book"></i>

此时,发现页面上并没有显示对应的图标,只显示一个小框框。后来发现是复制粘贴过来的样式前面缺少“fa”,导致引用失败。


正确使用方式是

<i class="fa fa-address-book">



对字体图标更多设置操作请移步到官方文档查看:http://fontawesome.dashgame.com/

标签: nuxt Awesome Font
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码