CODEWITHSUNDEEP
vue.jsfont-awesome
htmldev
htmldev

Reputation: 63

VueJS and using fontawesome icons in CSS

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 (<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>") of font awesome in index.html it works. I can see sorting icons.

Upvotes: 2

Views: 2667

Answers (2)

HotmanJw
HotmanJw

Reputation: 11

  1. Install font-awesome with npm/yarn

    > npm install font-awesome

  2. On your main.js script, add

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

  3. Use in component with:

       <i class="fa fa-dashboard"></i>

Upvotes: 1

kalak
kalak

Reputation: 71

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

Upvotes: 0

Related Questions