NativeScript+Vue에서 글꼴 아이콘 사용(Fontawesome)

1620 단어 NativeScript
Vue에서 Fontawesome 아이콘을 사용하는 방법
FoontAwesome 이외에 다른 글꼴 아이콘도 같은 방법을 사용할 수 있습니다.
다운로드
우선FoontAwesome의ttf 파일을 얻습니다.
아래에서 다운로드를 시작합니다.
주의해야 할 것은 2020년 5분의 2까지 현재 v5계는 사용할 수 없다, v4.다운로드
정렬 방법
다운로드한 font-awesome-44.7.0.zip을 해제하여 이름fonts/fontawesome-webfont.ttf이라는 파일을 NativeScript Vue 프로젝트의 app/assets/fonts 폴더로 복사합니다.
복사된 파일의 이름을 FontAwesome.ttf(중요함)로 변경합니다.
사전 준비
글로벌 스타일시트 app/app.scss에서 다음과 같은 내용을 기술합니다.
app/app.scss
.fa {
  font-family: FontAwesome;
}
사용법
우선 사용할 아이콘 글꼴의 단일 문자열을 알아야 합니다.
FoontAwesome의 경우 FoontAwesome에서 사용할 아이콘 글꼴의 페이지를 열면 아래에 표시됩니다.

나는 이곳에서 톱니바퀴의 아이콘 글씨체를 사용하고 싶다.\u를 접두사로 사용하면 제복을 지정할 수 있습니다.
톱니바퀴 아이콘의 문자 코드는 f013이기 때문에 다음과 같이 지정합니다\uf013.
components/App.vue

<Button :text="'\uf013'" class="fa"></Button>

아래와 같이 아이콘 글꼴을 표시하면 OK입니다.

좋은 웹페이지 즐겨찾기