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');
以上就是小編今天的分享了,希望可以幫助到大家。