https://github.com/atomjoy/vue-fontawesome

How to install free icons from Fontawesome in Vue3.
https://github.com/atomjoy/vue-fontawesome

List: vue-fontawesome

fontawesome-vue vue-fontawesome vue-icons vue3-fontawesome vue3-icons

Last synced: about 2 months ago
JSON representation

How to install free icons from Fontawesome in Vue3.

• Host: GitHub
• URL: https://github.com/atomjoy/vue-fontawesome
• Owner: atomjoy
• Created: 2024-03-27T09:01:11.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-03-27T09:39:39.000Z (9 months ago)
• Last Synced: 2024-03-27T10:29:49.473Z (9 months ago)
• Topics: fontawesome-vue, vue-fontawesome, vue-icons, vue3-fontawesome, vue3-icons
• Language: JavaScript
• Homepage: https://github.com/atomjoy/vue-fontawesome
• Size: 34.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue3 Fontawesome Icons

How to install free icons from fontawesome in vue3.

## Vue 3

```sh

npm install vue@latest

npm install vue-router@4

npm install vue-i18n@9

npm install pinia

npm install --save-dev @vitejs/plugin-vue

npm install @googlemaps/js-api-loader

```

## Fontawesome

### Install

```sh

npm i --save @fortawesome/vue-fontawesome@latest-3

npm i --save @fortawesome/fontawesome-svg-core

npm i --save @fortawesome/free-solid-svg-icons

npm i --save @fortawesome/free-regular-svg-icons

npm i --save @fortawesome/free-brands-svg-icons

```

### Add in app.js

```js

import './bootstrap';

import { createApp } from 'vue'

import App from './App.vue'

import './assets/main.css'

import FontAwesomeIcon from "./utils/fontawesome";

const app = createApp(App)

app.component("FontAwesomeIcon", FontAwesomeIcon)

app.mount('#app')

```

### Add icon

```vue

// import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

function scrollToTop() {

    window.scrollTo({top: 0, behavior: 'smooth'});

    // window.scrollIntoView({ behavior: 'smooth' })    

    // window.scrollTo(0,0);

}

    

    


        

    


html {

    scroll-behavior: smooth;

}

.scrolltop {

    color: #fff;

    background: #0099ff;

    position: fixed;

    bottom: 10px;

    right: 10px;

    padding: 15px;    

}

```

### More icons

```vue















```