작은 웹 프론트 엔드 벡터 아이콘을 사용하는 방법

저자：Eve Cole 업데이트 시간：2025-04-10 03:16:01

머리말

프론트 엔드 페이지를 쓸 때는 종종 작은 아이콘과 같은 일부 사진을 사용합니다. 사진을 사용하면 코드가 더 번거 롭습니다. 최근에 편리하고 실용적인 방법을 찾았습니다. 직접 사용하십시오.

1. 사진 작동 방법을 소개합니다

먼저 URL을 입력합니다 : https://www.iconfont.cn/

이 웹 사이트를 기억할 수 없다면 Baidu : Alibaba Vectors에서 검색 할 수 있으며이 웹 사이트가 나타납니다.

다음은 더 일반적으로 사용되고 편리한 두 가지 방법입니다.

방법 1 : 글꼴 등급 참조

호환성이 우수하며 IE8+및 모든 최신 브라우저를 지원합니다.
클래스는 아이콘을 정의하는 데 사용되므로 아이콘을 교체 할 때 클래스에서 이미지 이름 참조 만 수정하면됩니다.
그러나 글꼴은 본질적으로 사용되기 때문에 멀티 컬러 아이콘은 여전히 지원되지 않습니다.

1 단계 : 웹 사이트를 입력하면 검색 창이 표시되거나 원하는 아이콘 이름을 직접 입력하거나 아이콘 라이브러리에서 찾을 수 있습니다.

2 단계 : 그런 다음 장바구니에 추가하십시오.

3 단계 : 쇼핑 카트를 클릭하여 새 프로젝트를 만들고 동일한 프로젝트에 이미지를 추가하려면 다시 재현 할 필요가 없음을 확인하십시오.

4 단계 : 다음으로 다음 페이지가 나타나고 코드를 복사하고 코드 문서를 참조하십시오.

 <link rel = stylesheet href = http : //at.alicdn.com/t/font_1587841_2580lrwj551.js>

5 단계 : 코드를 소개 할 때 http를 추가해야합니다.

6 단계 : 해당 아이콘을 선택하고 클래스 이름을 가져와 복사 및 붙여 넣기, No-Referrer SRC =/IMG/BVBB5Hz/보기 SRC = https : //cdn.segmentfault.com/v-5e05cb79/global/img/squares.svg title.jpg>

 <body> <i class/= iconfont icon-xxx> </i> </body>

방법 2 : 기호 참조

새로운 사용 방식이며 현재 권장되는 사용법이기도합니다. 웹 사이트에는 또한 관련 소개가 있습니다. 위의 방법 1과 비교하여 다음 특성이 있습니다.
멀티 컬러 아이콘은 지원되며 흑백으로 더 이상 제한되지 않습니다.
일부 트릭을 통해 글꼴 크기의 색상을 지원하여 글꼴과 같은 스타일을 조정합니다.
호환성이 좋지 않으며 IE9+ 및 최신 브라우저를 지원합니다.
브라우저 렌더링 SVG의 성능은 평균적이며 PNG만큼 좋지 않습니다.

1 단계 : 프로젝트에서 여러 아이콘을 사용하려면 사용하려는 아이콘을 선택하고 장바구니에 추가 한 다음 코드 업데이트를 클릭 한 다음 코드 참조 연결을 업데이트 할 수도 있습니다. 이 방법은 로컬로 다운로드해야합니다.

2 단계 : 다운로드 후 폴더에 일부 파일을보고 코드 페이지에 JS 파일을 소개 할 수 있습니다.

 <link rel = stylesheet href = http : //at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </script>

3 단계 : 아이콘에 대한 참조가 적용되도록 파일 패키지를 동일한 디렉토리에 넣으십시오.

4 단계 : 동일한 방법으로 아이콘 아래의 이미지 이름을 참조하고 SVG에 이미지 이름을 복사하여 붙여 넣고 href = 변경 이름을 대체해야합니다.

 <svg class = icon aria-hidden = true> <xlink 사용 : href =#icon-079aiqing> </use> </svg>

5 단계 : 코드 페이지에 위의 두 파일 주소를 소개하는 것 외에도 스타일 코드도 소개해야합니다.

 <style> .icon {너비 : 1em; 높이 : 1em; 수직 -정렬 : -0.15EM; 채우기 : CurrentColor; 오버플로 : 숨겨진; } </style>

다음은 참조 용 코드입니다

 <! docType html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewport content = width = device-width, 초기 스케일 = 1.0> <메타 http-equiv = x-ua-compatible content = ie = edge> alibaba vector </title rel> href = http : //at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </script> </head> <style> .icon {width : 1em; 높이 : 1em; 수직 -정렬 : -0.15EM; 채우기 : CurrentColor; 오버플로 : 숨겨진; } </style> <body> <입력 유형 = 텍스트 자리 표시기 = 검색> <svg class = icon aria-hidden = true> <xlink 사용 : href =#icon-079aiqing> </svg> </body> </html>

코드 효과 :

요약 :

첫 번째 방법은 빠르고 편리하며 다운로드가 필요하지 않으며 사용하기에 더 편리합니다. 단점은 단독으로 만 사용할 수 있으며 색상을 지원하지 않습니다.

두 번째 방법은 다색 및 여러 사진을 지원하며 여러 사진을 소개하는 효과가 더 좋습니다. 단점은 로컬 파일 패키지로 다운로드해야하며 사용하기 전에 동일한 디렉토리에 배치해야합니다.

전반적으로 Alibaba Vector 그래픽은 프론트 엔드 개발자에게 매우 도움이되며 자유롭게 사용할 수 있습니다. 필요에 따라 위의 방법을 사용할 수 있습니다.

위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.