Vue 애플리케이션 참조 벡터 일러스트

이번에는 Vue 애플리케이션 참조 벡터 그래픽을 가져왔습니다. Vue 애플리케이션 참조 벡터 그래픽에 대한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

1. 아이콘 아이콘을 다운로드하려면 사용자 정의할 수 있는 많은 벡터 아이콘이 있는 icomoon 웹사이트를 권장합니다. 물론 Alibaba 벡터 아이콘 라이브러리로 이동하여 필요한 작은 아이콘을 다운로드할 수도 있습니다. . 클릭하여 icomoon 웹사이트에 들어가 오른쪽 상단의 "IcoMoon 앱"을 클릭하고 필요한 아이콘을 찾아 선택한 후 오른쪽 하단의 "글꼴 생성"을 클릭한 다음 상단의 두 번째 버튼인 "기본 설정"을 클릭하세요. 일반적으로 들어가서 "글꼴 이름"을 변경한 다음 돌아가서 오른쪽 하단의 "다운로드"를 클릭하면 아이콘을 다운로드할 수 있습니다.

2. 다운로드한 아이콘 압축 패키지의 압축을 풀고 다음과 같은 파일을 가져옵니다.

3. vue 프로젝트의 src 폴더에 새 공통 폴더를 만들고 여기에 글꼴을 복사한 다음 공통 폴더에 복사합니다. 폴더 에 새 스타일러스 폴더를 만들고 여기에 style.css를 스타일러스에 복사합니다. 이 CSS 파일에는 아이콘과 관련된 스타일 코드가 포함되어 있으므로 쉽게 식별할 수 있도록 icon.styl로 변경했습니다. 스타일러스 전처리 프로세서를 사용하므로 접미사 이름이 styl인 새 스타일러스를 만듭니다. 전처리기가 다를 수 있습니다. 이는 코드 사양을 따르도록 하세요.

4 이제 요점입니다. 방금 압축을 푼 파일의 style.css에 있는 @font-face의 URL 경로를 프로젝트의 경로로 수정해야 합니다.

5. 그런 다음 App.vue에 이 파일을 삽입합니다. 그렇지 않으면 효과적이지 않습니다.

6. 그런 다음 템플릿에 해당 클래스 이름을 쓰고 스타일을 추가합니다.

결과 페이지는 다음과 같습니다.

당신은 이 글을 읽었을 것입니다. 당신은 사례 방법을 마스터했습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 글을 주목하세요!

추천 도서:

vue의 전체 선택 및 역선택 기능

JS 인터뷰의 5가지 상식

위 내용은 Vue 애플리케이션 참조 벡터 일러스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!