Home  >  Article  >  Web Front-end  >  How to implement small icons using Font Awesome via Vue.js

How to implement small icons using Font Awesome via Vue.js

不言
不言Original
2018-07-14 17:19:173044browse

This article mainly introduces how to use Font Awesome’s small icons in Vue.js. It has a certain reference value. Now I share it with you. Friends in need can refer to it

  • 1. Install Font Awesome

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome
  • 2. Configuration (in the file src/main.js), pay attention to several imported modules and loaded modules, It can only be used in the project after being introduced. This example only introduces the use of coffee

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee)

Vue.component('font-awesome-icon', FontAwesomeIcon)
  • 3. Use (in any vue file)

<template>
  <p id="app">
    <font-awesome-icon icon="coffee" />
    <router-view/>
  </p>
</template>
  • 4. Rendering (small icons are visible in the red area)
    How to implement small icons using Font Awesome via Vue.js

The above is the entire content of this article. I hope it will be helpful to everyone’s study. More For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Basic elements of Element form validation in Vue

Mobile web music player based on vue Implementation

The above is the detailed content of How to implement small icons using Font Awesome via Vue.js. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn