Nuxt.js에서 FontAwesome 소개

기본 절차

대략적인 절차는 다음과 같습니다.

①FomtAwesome 관련을 커맨드로부터 인스톨, FomtAwesome 라이브러리를 준비
↓
② Nuxt.js 내에서 이들을 라이브러리로 로드
↓
③ 필요한 명령만을 라이브러리에서 추출, 각 컴포넌트에서 사용

상세

아래 기사를 참조하십시오.

Nuxt.js에서 FontAwesome을 사용하는 방법. 필요한 아이콘만 가져옵니다!
h tps:// 퀵했다. 작은 m/넓은 py0123/있어 MS/그래 03CDC407692196 아 df4

덧붙여 상기 기사는 yarn을 대상으로 쓰여져 있기 때문에, npm에서의 fontawesome 설치에 관해서는 이하를 부탁드립니다.
Font Awesome을 Vue.js에서 사용해 봅시다.
htps : // m / 쿠라 라라 / ms / d76776 A7 dc2d763 A068b

보충

상기만으로는 초보자에게는 조금 이해하기 어려운 곳도 있었으므로 설명합니다.

필요한 명령 만 라이브러리에서 추출하고 각 구성 요소에서 사용하는 방법

① 우선 Font Awesome 사이트로 이동합니다.

Font Awesome
htps : ///후타타우우소메. 코m/

②사용하고 싶은 아이콘의 페이지로 갑니다.

③이름을 어레인지

그리고 여기에 주목입니다.


i class="fas fa-map-marker-alt"
라고 적혀 있습니다.
이 fa-map-marker-alt는 이 아이콘의 고유한 이름입니다.
그러나 이것은 Nuxt에서 사용하기위한 형식이 아닙니다.
조금 준비합니다.

배열이라고해도

"-"제거

각 단어의 시작을 대문자

그냥.

즉 이 경우
fa-map-marker-alt
가
faMapMarkerAlt입니다.

이것은 Nuxt에서 사용할 수 있는 아이콘의 이름입니다.

④ 아이콘을 라이브러리에서 가져오고 사용

그리고 나중에는 위 페이지에도 있듯이 아이콘을 라이브러리에서 가져와서 사용하기만 하면 됩니다.

이 가져오기 시 위의 이름을 사용하십시오.

즉

*.vue

<script>
import { faMapMarkerAlt } from ‘@fortawesome/free-solid-svg-icons’
</script>

같은 느낌입니다.

덧붙여서 이쪽은 필요한 아이콘만을 가져오는 방법입니다.

아이콘을 많이 사용해야 하는 경우 아래에 자세한 내용이 있습니다.
Font Awesome을 Vue.js에서 사용해 봅시다.
htps : // m / 쿠라 라라 / ms / d76776 A7 dc2d763 A068b