前端的朋友都知道Font Awesome图标库，里面有丰富的常用图标，我在开发的时候经常用到，免去了到处找图标的麻烦。当然，阿里的iconfont也不错，但是比较乱，找到的图标有时候不匹配，大小比例也有一些偏差。即使你只使用某个图标库中的图标，也难免会有不完整的包含(这是我的经验。千万不要贬低iconfont，不要喷。)经过几年的发展，Font Awesome已经收录了互联网上最常用的图标，绝对可以满足大多数人的开发需求。当然，看标题就知道Font Awesome已经进入第5个时代了，使用方法和第4个之前的版本不一样，增加了付费版本。当然，免费版已经足够大家使用了！下面，作者将告诉你如何在你的vue开发项目中使用Font Awesome 5

vue的配置暂时不提，主要是font-awesome5的配置：

1.安装fontawesome的基本配置

NPM I-save @ fortawesome/font awesome NPM I-save @ fortawesome/vue-font awesome 2。安装fontawesome样式依赖项

NPM I-save @ for awesome/font awesome-free-solid NPM I-save @ for awesome/font awesome-free-regular NPM I-save @ fort awesome/font awesome-free-brands或两步集成

复制的代码代码如下： NPMI-save @ fortawesome/font awesome @ fortawesome/vue-font awesome @代表awesome/font awesome-free-solid @代表awesome/font awesome-free-regular @ fortawesome/font awesome-free-brands

3.在main.js中配置字体-棒极了

导入font awesome from ' @ fortawesome/font awesome ' import { font awesome icon } from ' @ fortawesome/vue-font awesome ' import solid from ' @ fortawesome/font awesome-free-solid ' import regular from ' @ fortawesome/font awesome-free-regular ' import brands from ' @ fortawesome/font awesome . library . add(regular)font awesome . library . add(brands)vue.component(' font-awesome-icon '，font awesome icon)

4.在vue页面使用它

Font-awesome-icon : icon='[' far '，' address-book ']'/当然不一定要写成font-awesome-icon标签，只是Vue的对比。main.js中带有vue.com的Vue.components，main.js中的vue.com只将其作为全局组件。在：icon='['样式'，'没有样式前缀的图表名称']'处，

以上是使用font-awesome 5.0.13

对于5.6.3版本，由于新增了Font Awesome SVG Core，5.6.3的安装是：

1.安装fontawesome的基本配置

NPM I-save @ fortawesome/font awesome-SVG-corenpm I-save @ fortawesome/free-solid-SVG-icons NPM I-save @ fortawesome/vue-font awesome 2、在main.js中配置font-awesome

从“@ fortawesome/font awesome-SVG-core”导入{ library }从“@ fortawesome/free-solid-SVG-icons”导入{ FontAwesomeIcon }从“@ fort awesome/vue-font awesome”库导入。Add (Fas) vue。组件(' font-awesome-icon '，fontawesomeicon) 3。你可以在这一页上写字

Font-awesome-icon icon='通讯簿'/或

font-awesome-icon : icon='[' fas '，'通讯录']'/非Fas可以直接写

字体-真棒-图标远图标=' spinner '/

还有两个fal和fab。在5.6.3版本，没有pro不知道怎么安装。请添加它们

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。