font-awesome.min.css使用,vue font-family

　　字体牛逼是一套流行的图标字体库。在实际开发过程中，我们经常会遇到需要使用图标的场景。对于一些常用的图标，我们可以直接在字体Awesome中查找使用。本文主要介绍如何在Vue开发项目中使用字体Awesome5的相关信息。有需要的可以参考一下。

　　前端的朋友都知道字体牛逼的图标库，里面有丰富的常用图标，作者在开发的时候经常用到，省去了自己到处找图标的麻烦。当然阿里的iconfont也不错，但是比较乱，找到的图标有时候不太匹配，大小比例也有些偏差。即使只用一个图标库，也难免会有收录不全的情况(这是作者的经验，绝对没有贬低iconfont的意思，不要喷)。字体牛逼通过几年的开发收集了网上最常用的图标，绝对可以满足大多数人的开发需求(有没有美工自己做的？当然，从标题就能看出来，字体Awesome已经进入5时代，使用方法和4之前的版本有所不同，增加了付费版本。当然，免费版也足够大家用了！作者会告诉你如何在你的vue开发项目中使用字体Awesome 5。

安装依赖

　　1.安装基本依赖项

　　$ NPM I-save @ fortawesome/font awesome

　　$ NPM I-save @ fortawesome/vue-font awesome

　　2.安装风格依赖

　　$ NPM I-save @ fortawesome/font awesome-free-solid

　　$ NPM I-save @ fortawesome/font awesome-free-regular

　　$ NPM I-save @ fortawesome/font awesome-free-brands

　　注意：

　　免费版支持三种风格：纯色、常规和品牌。后来在使用图标的时候，根据不同的风格会有不同的前缀。

　　如果下载依赖失败，试试cnpm，就不赘述了！

配置

　　进入main.js文件配置字体Awesome。配置方法比之前4的代码多。

　　从“@fortawesome/fontawesome”导入fontawesome

　　从“@fortawesome/vue-fontawesome”导入FontAwesomeIcon

　　从“@ fortawesome/font awesome-free-solid”导入实体

　　从“@ fortawesome/font awesome-free-regular”导入常规

　　从“@ fortawesome/font awesome-free-brands”导入品牌

　　fontawesome.library.add(实心)

　　fontawesome.library.add(常规)

　　fontawesome.library.add(品牌)

　　vue . component( font-awesome-icon ，FontAwesomeIcon)

使用

　　好了，配置完成后，你就可以随心所欲的在你的项目上使用Font Awesome了。使用方法如下：

　　例如，我们想使用图标“用户”:

1. 进入图标搜索页

　　搜索地址：https://fontawesome.com/icons.

2. 输入想使用的图标的英文，例如用户的英文是 user

3. 过滤收费图标

　　有些搜索结果是灰色的，说明是付费版。我们可以点击左边免费的过滤项，过滤出付费版。

4.点击图标查看

　　选择一个你满意的图标，点进去查看内容。

　　右边选的是哪种风格？这里可以看到这个图标支持实、正、轻(充电式)，然后这里是大家熟悉的使用代码。但是，不能像这样直接在Vue中使用。应该这样写：

　　font-awesome-icon :icon=[fas ， user]/

　　将数组传递到icon属性中。第一个参数是样式，第二个是图标名称。看起来“发-”的字是省了，但是结构感觉比以前复杂了(o)…

5. 查看结果

　　好了，是时候检查我们努力的成果了。打开浏览器查看图标效果，介绍成功！

总结

　　相比之前的版本，字体Awesome 5在图标优化上绝对完美，图标库的内容也丰富了很多。但是配置比较繁琐，需要一点时间。总的来说是一个很棒的图标库。如果觉得有用，请给我点个赞！

　　这就是这篇关于如何在Vue开发项目中使用字体Awesome5的文章。关于使用字体Awesome 5的Vue的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。