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');

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