Vue Element 사용 icon 아이콘 튜 토리 얼 상세 설명(제3자)

element-ui 가 가지 고 있 는 아이콘 라 이브 러 리 가 부족 합 니 다.제3자 icon 을 도입 해 야 합 니 다.자신 이 사용 할 때 문제 가 있 습 니 다.튜 토리 얼 을 참고 하여 상세 하 게 기록 하고 보충 해 야 합 니 다.
우리 에 게 가장 선 호 하 는 것 은 당연히 아 리 아이콘 라 이브 러 리 다.
튜 토리 얼:
1.아 리 아이콘 열기,등록>로그 인>아이콘 관리>내 프로젝트
 
아이콘 관리>내 항목,클릭
새 항목
 
새 항목
항목 이름 을 마음대로 쓰 세 요.접 두 사 는 element-ui 가 가지 고 있 는 icon(접두사:el-icon)과 이름 을 바 꾸 지 마 세 요.
설정 완료,새로 만 들 기
 
접두사 조심 하 세 요.설정 완료,새로 만 들 기
지금 우 리 는 아 리 icon 홈 페이지 로 돌아 가 원 하 는 icon 라 이브 러 리 를 누 르 고 있 습 니 다.쇼핑 카 트 를 대량으로 가 져 오지 않 았 기 때문에 일반적인 상황 에서 하나씩 가 져 가 야 합 니 다.시간 을 너무 낭비 합 니 다.그러면 콘 솔 에 다음 코드 를 입력 하고 대량으로 가 져 오 십시오.

var icons = document.querySelectorAll('.icon-gouwuche1');
 var auto_click = function(i) { if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };
auto_click(0);

 
그리고 리 턴 을 클릭 하면 그 는 이 갤러리 의 모든 icon 을 카 트 에 넣 을 것 이다.
페이지 에 있 는 카 트 를 주문 하 다.
 
페이지 오른쪽 카 트 아이콘 클릭
방금 만 든 항목 에 아이콘 을 추가 합 니 다.
 
덧붙이다
fontClass 를 설정 하고 로 컬 에 다운로드 합 니 다.
 
로 컬 다운로드,압축 풀기
압축 을 풀 면 이 파일 들 을 얻 을 수 있 습 니 다.그림 속 의 파일 을 엽 니 다.
다음 코드 를 추가 합 니 다.주의:el-icon-third 는 이전에 설정 한 icon 접두사 입 니 다.두 번 째 el-icon-third 앞 에 빈 칸 이 있 습 니 다.

 [class^="el-icon-third"], [class*=" el-icon-third"]/*     */
 { font-family: "iconfont" !important;
 font-size: 16px;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; }  

 
녹색 상자 의 데이터 가 일치 하면 됩 니 다.
2.위 에 설정 한 후 vue 항목 을 엽 니 다.src-assets 에서 icon 폴 더 를 만 들 고 모든 파일 을 복사 합 니 다.
main.js 에서 css 를 도입 합 니 다.
 
꼭 들 여 오 세 요.
그리고 다시npm run dev한 번.
3.아 리 icon 에 있 는 항목 을 열 고 원 하 는 아이콘 코드 를 복사 합 니 다.
 
아이콘 코드:el-icon-ump-qianniudaidise사용,두 가지 인용 방식 은 element 자체 의 사용 방법 과 같 습 니 다.
 
마지막 효과:
 
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue Element 에서 icon 아이콘 튜 토리 얼 을 사용 하여 상세 하 게 설명 하 는 것 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!