<link rel="stylesheet" href="https://js.how234.com/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" /><script type="text/javascript" src="https://js.how234.com/third-party/SyntaxHighlighter/shCore.js"></script><script type="text/javascript"> SyntaxHighlighter.all(); </script>
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-corenpm install --save @fortawesome/vue-fontawesomenpm 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');
