Vue.js를 통해 Font Awesome을 사용하여 작은 아이콘을 구현하는 방법

이 글은 Vue.js에서 Font Awesome의 작은 아이콘을 사용하는 방법을 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유합니다.

# 🎜 🎜#
• 1. Font Awesome

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome

• 2 구성(src/main.js 파일) , 가져온 모듈과 로드된 모듈에 주의하세요. 가져온 모듈만 프로젝트에서 사용할 수 있습니다. 이 예에서는 커피

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 사용(모든 vue 파일에서)
  을 소개합니다. #🎜 🎜#

  <template>
    <p id="app">
      <font-awesome-icon icon="coffee" />
      <router-view/>
    </p>
  </template>

4. 렌더링(빨간색 영역에 작은 아이콘 표시)

• 
  

  # 🎜🎜 #위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장사항:

Vue의 요소 양식 유효성 검사의 기본 요소

#🎜🎜 #vue 기반의 모바일 웹 뮤직 플레이어 구현

위 내용은 Vue.js를 통해 Font Awesome을 사용하여 작은 아이콘을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!