-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Open
Labels
topic: configRelates to VuePress configRelates to VuePress configtopic: docsUsed when working with docsUsed when working with docstype: enhancementRequest to enhance an existing featureRequest to enhance an existing featuretype: feedbackUser feedbackUser feedback
Description
Feature request
Just wanted to share how I was finally able to add Vue Fontawesome to VuePress. The trick is to add it to enhanceApp.js
👍
Here are the exact steps:
- Install vue-fontawesome (this was pulled from their readme)
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/vue-fontawesome
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-regular-svg-icons
- Register it as a global component (again, the example is from vue-fontawesome readme)
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faUserSecret)
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
// ...apply enhancements to the app
Vue.component('font-awesome-icon', FontAwesomeIcon)
}
- Now you can use it anywhere in your component 👏
<font-awesome-icon icon="user-secret" />
This took me a while to figure it out 😅. This StackOverflow response was the gamechanger (thank you!) Maybe it's something we can include it in the docs and save folks some time 😊
What problem does this feature solve?
What does the proposed API look like?
How should this be implemented in your opinion?
Are you willing to work on this yourself?
adamdehaven, kamalahmed, Manuel-Suarez-Abascal and hassam-labsadamdehaven and Manuel-Suarez-Abascaltrolologuy and DiegoFleitas
Metadata
Metadata
Assignees
Labels
topic: configRelates to VuePress configRelates to VuePress configtopic: docsUsed when working with docsUsed when working with docstype: enhancementRequest to enhance an existing featureRequest to enhance an existing featuretype: feedbackUser feedbackUser feedback