NativeScript+Vue에서 글꼴 아이콘 사용(Fontawesome)
1620 단어 NativeScript
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입니다.Reference
이 문제에 관하여(NativeScript+Vue에서 글꼴 아이콘 사용(Fontawesome)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hosikiti/items/788b8cb6346c23c06e44텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)