When adding icon in a project configured with vue-cli(opens new window) , you'll first create a library of icons, and then you can call them anywhere in your UI.
Set up the library
You'll first create a library of all the icons you want to use in your project in the
src/main.ts file. Here's an example that adds the Solid style User Secret icon to the library:
Call the Icons
You can now call the icons, just use the syntax below wherever you want the icons to appear in your project, like in the
src/App.vue file. Here's the rest of the example we started above that adds the
fa-user-secret icon into the app UI:
Several icons in different styles
Here's an example with a number of icons in different styles, just to give you a sense of how the syntax changes from style to style.
Time to add those icons.
Same icon, different styles
You can also import the same icon from different styles with some help from ES
import. Import in the
Add the icons to your component.
If you are using inline templates or HTML as templates you need to be careful to avoid self-closing tags. Read more about self-closing tags on Vue.js(opens new window) . If you are writing these types of templates, you'll need to adjust the syntax to be valid HTML, like this:
Add Some Style
Now that you have some icons on the page, add some pieces of flair! Check out all the styling options you can use with Font Awesome and React. Express Yourself with Some Styling!