VueJS and using fontawesome icons in CSS

Question

I have been using font awesome icon in mine vueJS ("vue": "~2.6.11") application component's CSS.

Could you please help me with following stuff.

th.sortable::after {
    font-family: "FontAwesome";
    content: "\f0dc";
    position: absolute;
    left: 10px;
    color: #999;
}

I have followed these steps to install font awesome in my Vue app.

yarn add @fortawesome/vue-fontawesome -D
yarn add @fortawesome/fontawesome-svg-core -D

In main.js I have below code:

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';

Vue.component('font-awesome-icon', FontAwesomeIcon)

but this does not work for me, If I directly give CDN URL (") of font awesome in index.html it works. I can see sorting icons.

user_13909190 · Answer

Install font-awesome with npm/yarn
```
> npm install font-awesome
```

On your main.js script, add

import 'font-awesome/scss/font-awesome.scss'

Use in component with:
```
   
```

user_10263808 · Answer

In your main.js, did you add this line after import : Vue.component('font-awesome-icon', FontAwesomeIcon)

VueJS and using fontawesome icons in CSS

2 Answers