awesome java是什么，讓我們一起了解一下？

Font Awesome是一套流行的圖標(biāo)字體庫，我們在實(shí)際開發(fā)的過程中會經(jīng)常遇到需要使用圖標(biāo)的場景，對于一些常用的圖標(biāo)，不用設(shè)計(jì)師，我們可以直接在Font Awesome中找到并且使用。

Font Awesome如何安裝？

在Font Awesome 4版本中，可以通過使用npm安裝font-awesome依賴以后直接在main.js中引入全部CSS文件來像使用原生JavaScript開發(fā)一樣使用Font Awesome，但到了Font Awesome 5版本后，官方推出了對Vue的支持，我們可以根據(jù)自己的需求引入圖標(biāo)，這樣到了最后打包的時(shí)候生產(chǎn)環(huán)境的文件只會包含我們所需要的圖標(biāo)文件，大大減小了依賴的體積，優(yōu)化了應(yīng)用的性能，本文講解如何在Vue中使用Font Awesome 5版本。

一般來說需要安裝三個(gè)依賴，也是官方推薦的安裝內(nèi)容：

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環(huán)境中使用需要的Vue組件，第三行的依賴是Font Awesome的solid風(fēng)格圖標(biāo)。

Font Awesome 5中官方將圖標(biāo)分為了幾個(gè)風(fēng)格，有solid，regular，light和brands。作為免費(fèi)用戶，只能使用部分solid，regular和brands的圖標(biāo)，我們目前只安裝了solid圖標(biāo)，它已經(jīng)包含了絕大多數(shù)我們要用到的圖標(biāo)，有時(shí)我們還需要使用到一些商標(biāo)圖標(biāo)，讓我們再來安裝商標(biāo)圖標(biāo)依賴。

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

我已經(jīng)用Vue CLI初始化了一個(gè)空白的Vue項(xiàng)目，你也可以用你自己的方式來新建一個(gè)Vue項(xiàng)目，在Vue的入口文件main.js中添加如下內(nèi)容：

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

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