awesome java

awesome java是什么，让我们一起了解一下？

Font Awesome是一套流行的图标字体库，我们在实际开发的过程中会经常遇到需要使用图标的场景，对于一些常用的图标，不用设计师，我们可以直接在Font Awesome中找到并且使用。

Font Awesome如何安装？

在Font Awesome 4版本中，可以通过使用npm安装font-awesome依赖以后直接在main.js中引入全部CSS文件来像使用原生JavaScript开发一样使用Font Awesome，但到了Font Awesome 5版本后，官方推出了对Vue的支持，我们可以根据自己的需求引入图标，这样到了最后打包的时候生产环境的文件只会包含我们所需要的图标文件，大大减小了依赖的体积，优化了应用的性能，本文讲解如何在Vue中使用Font Awesome 5版本。

一般来说需要安装三个依赖，也是官方推荐的安装内容：

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/free-solid-svg-icons

其中第一行的依赖是Font Awesome的核心部分，第二行的依赖是Font Awesome在Vue环境中使用需要的Vue组件，第三行的依赖是Font Awesome的solid风格图标。

Font Awesome 5中官方将图标分为了几个风格，有solid，regular，light和brands。作为免费用户，只能使用部分solid，regular和brands的图标，我们目前只安装了solid图标，它已经包含了绝大多数我们要用到的图标，有时我们还需要使用到一些商标图标，让我们再来安装商标图标依赖。

npm install --save @fortawesome/free-brands-svg-icons

我已经用Vue CLI初始化了一个空白的Vue项目，你也可以用你自己的方式来新建一个Vue项目，在Vue的入口文件main.js中添加如下内容：

import Vue from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import App from './App.vue';
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.config.productionTip = false;
new Vue({
    render: function (h) {
        return h(App);
    },
}).$mount('#app');

以上就是小编今天的分享了，希望可以帮助到大家。