main.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { createApp } from 'vue'; import App from './App.vue'; import { library } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Add icons to the library library.add(fas) const app = createApp(App); app.component('font-awesome-icon',FontAwesomeIcon) // Mount the Vue app app.mount('#app'); |
App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <div> <!-- Coffee icon with custom size and color --> <font-awesome-icon icon="coffee" style="font-size: 2rem; color: #ff5733;" /> <!-- Home icon with custom size and color --> <font-awesome-icon icon="home" style="font-size: 3rem; color: #4CAF50;" /> <!-- User icon with custom size and color --> <font-awesome-icon icon="user" style="font-size: 2.5rem; color: #3498db;" /> <!-- Search icon with custom size and color --> <font-awesome-icon icon="search" style="font-size: 2rem; color: #9b59b6;" /> <!-- Heart icon with custom size and color --> <font-awesome-icon icon="heart" style="font-size: 2rem; color: #e74c3c;" /> </div> </template> <script> export default { name: 'App', } </script> |
