How to use Font Awesome 5 in Vue development projects

Font Awesome official website: https://fontawesome.com/

Front-end friends all know the Font Awesome icon library, which has a wealth of commonly used icons. The author often uses it when developing, which saves the trouble of looking for icons everywhere. Of course, Alibaba's iconfont is also good, but it is more messy, and the icons found are sometimes not matching, and there are some deviations in size and proportion. Even if you only use icons from a certain icon library, it is inevitable that there will be incomplete collection (this is the author's experience, and there is absolutely no intention to belittle iconfont, please don't spray). Font Awesome has included the most commonly used icons on the Internet through several years of development, which can definitely meet the development needs of most people (why do you have to do it yourself if you have an artist? ! !) Of course, you can tell from the title that Font Awesome has entered the 5 era, and the usage method is also different from the versions before 4, and a paid version has been added. . . Of course, the free version is enough for everyone! Next, I will tell you how to use Font Awesome 5 in your own Vue development project.

Install Dependencies

1. Install basic dependencies

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/vue-fontawesome

2. Install style dependencies

$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular
$ npm i --save @fortawesome/fontawesome-free-brands

Notice:

• The free version supports three styles: solid, regular and brands. When using icons later, there will be different prefixes depending on the style.
• If downloading dependencies fails, try cnpm. I won’t go into details!
  

Configuration

Enter the main.js file to configure Font Awesome. The configuration method has more code than before 4.

import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import solid from '@fortawesome/fontawesome-free-solid'
import regular from '@fortawesome/fontawesome-free-regular'
import brands from '@fortawesome/fontawesome-free-brands'

fontawesome.library.add(solid)
fontawesome.library.add(regular)
fontawesome.library.add(brands)

Vue.component('font-awesome-icon', FontAwesomeIcon)

use

Ok, after the configuration is complete, you can use Font Awesome in your project as you wish. The usage is as follows:

For example, we want to use the "User" icon:

1. Enter the icon search page

Search address: https://fontawesome.com/icons...

2. Enter the English name of the icon you want to use, for example, user is user

3. Filter paid icons

Some of the search results are gray, indicating that they are paid versions. We can click the filter item Free on the left to filter out the paid versions.

4. Click the icon to view

Select an icon that you like and click to view the content.

On the right is the style to be selected. Here you can see that this icon supports solid, regular and light (paid style). Then below is the familiar usage code, but it cannot be used directly in Vue. It should be changed to the following writing:

<font-awesome-icon :icon="['fas','user]"/>

Pass an array into the icon property. The first parameter is the style, and the second is the icon name. It seems that we can save writing "fa-" characters, but the structure feels more complicated than before (⊙o⊙)...

5. View the results

OK, it’s time to check out the results of our hard work. Open your browser to view the icon effect. The introduction was successful!

Summarize

Font Awesome 5 is absolutely perfect in icon optimization compared to previous versions, and the icon library is also much richer in content. However, the configuration is more complicated than before and takes some time. Overall, it is a great icon library. If you find it useful, please give it a thumbs up!

This is the end of this article about how to use Font Awesome 5 in Vue development projects. For more information about using Font Awesome 5 in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!