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. 그런 다음 템플릿에 해당 클래스 이름을 쓰고 스타일을 추가합니다.

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

위 내용은 제가 정리한 내용입니다. 여러분을 위해, 앞으로도 여러분에게 도움이 되기를 바랍니다.

관련 기사:

노드 디버깅 도구 튜토리얼에 대한 간략한 소개

js 및 CSS에 대한 웹팩 패키징 및 압축 방법의 예

js/css 파일을 동적으로 로드하고 제거하기 위한 샘플 코드

위 내용은 Vue 프로젝트에 아이콘 아이콘을 도입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!