vue font awesome icons

1. Install the Vue Font Awesome package:

npm install --save @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

1. Import the necessary modules in your main Vue file (e.g., main.js):

import { createApp } from 'vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';

library.add(fas);

const app = createApp(App);
app.component('font-awesome-icon', FontAwesomeIcon);
app.mount('#app');

1. Use Font Awesome icons in your Vue components:

<template>
  <div>
    <font-awesome-icon icon="coffee" />
    <!-- Replace "coffee" with the icon name you want to use -->
  </div>
</template>

<script>
export default {
  // Component logic
};
</script>

Ensure that you replace "coffee" with the name of the specific Font Awesome icon you want to use. You can find the icon names on the Font Awesome website.

1. Customize the icon size and style using props:

<template>
  <div>
    <font-awesome-icon icon="coffee" :size="48" :class="['text-danger', 'my-custom-class']" />
  </div>
</template>

<script>
export default {
  // Component logic
};
</script>

Adjust the :size prop to set the icon size and use the :class prop to apply custom classes for styling.