Enabling Font Awesome in a project on Vue.js
I need to add to a project on Vue.js font icons Font Awesome, often used in conjunction with Bootstrap.
But I can't do it.
Background:
nvm install 8.11.3 x64
nvm use 8.11.3
Installing Vue.js and project creation:
npm install -g @vue/cli
npm vue ui
Steps of the Project Creation Wizard:
- Package Manager - NPM
- Manual selection components
- Components: Babel, Vuex, SASS, ESLint, Unit Testing (last for growth)
- CSS pre-processot: SCSS/SASS; ESLint + standart config; testing - Jest
Then added Bootsrap:
npm install bootstrap-vue bootstrap --save
# main.js
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
# App.vue
<style lang="scss">
@import "~bootstrap/dist/css/bootstrap.css";
</style>
Bootstrap 4 styles have taken off. Lacks Font Awesome support... but from the abundance of options I have eyes they run away:
I repeat the question:
How to add to a project on Vue.js font icons Font Awesome?
Preferably with a Vue plugin, because in theory, only the parts used are expected to be assembled there...
PS I'm new to Vue.js and if I connected Bootstrap incorrectly, please correct it..))
1 answers
Option 1
Just install the font-awesome 4.7.0 package and import the style.
Usage according to v4 documentation
Thanks for the tip @artem-gorlachev ))
Option 2
More complicated:
- Installing the package @fortawesome/vue-fontawesome 0.1.1
-
We deliver the necessary SVG icons, for example:
npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-brands-svg-icons npm i --save @fortawesome/free-regular-svg-icons Announcing the name user-tag and use the new tag, according to the package documentation.
Plus, we get the latest version of the "font", which is currently version 5.2.0
The final size of the project I have turned out to be about the same:
It's a bit heavy, but I don't know how to reduce it yet... ))