부트 스트랩 아이콘 라이브러리를 설치하고 사용하는 방법은 무엇입니까?

부트 스트랩 아이콘을 설치하고 사용하는 세 가지 방법이 있습니다. 1. CDN을 사용하고 HTML 헤드에 링크를 추가하십시오. 2. NPM을 통해 설치, React 및 Vue와 같은 현대 프로젝트에 적합합니다. NPM 설치 부트 스트랩 아이콘을 실행하고 CSS를 가져와야합니다. 3. SVG 또는 글꼴 파일을 수동으로 다운로드하여 가져옵니다. 그것을 사용할 때는 BI 및 아이콘 이름 클래스 (예 : 이중 하트)를 추가하여 아이콘을 삽입 할 수 있습니다. SPAN과 같은 다른 인라인 요소를 사용할 수도 있습니다. 더 나은 성능 및 사용자 정의 기능을 위해 SVG 파일을 사용하는 것이 좋습니다. BI-LG, BI-2X 및 기타 클래스를 통해 크기를 조정하고 텍스트 위험 또는 사용자 정의 CSS와 같은 부트 스트랩 텍스트 클래스를 사용하여 색상을 수정할 수 있습니다. 모범 사례에는 다음이 포함됩니다. 공식 아이콘 이름 확인, ARIA-HIDDEN = "True"추가 장식 아이콘에 ARIA 태그 또는 SR 전용 텍스트 추가 SENMANTIC ICONS에 SM-HID 텍스트 추가는 가볍고 부트 스트랩 프레임 워크 지원이 필요하지 않으며 모든 프로젝트에 적합합니다.

부트 스트랩 아이콘을 설치하고 사용하는 것은 간단하고 유연합니다. CDN, NPM을 통해 추가하거나 파일을 직접 다운로드 할 수 있습니다. 프로젝트에서 시작하여 사용하는 방법은 다음과 같습니다.

✅ 1. 부트 스트랩 아이콘 설치 (하나의 메소드 선택)

부트 스트랩 아이콘을 사용하려면 전체 부트 스트랩 프레임 워크가 필요하지 않습니다. 여기에 가장 일반적인 방법은 다음과 같습니다.

옵션 A : CDN 사용 (기본 사용을 위해 가장 빠른)

html 파일의 안에이 <link> 태그를 추가하십시오.

 <link href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"rel = "Stylesheet">

✅ 빠른 프로토 타입 또는 간단한 웹 사이트에 가장 적합합니다. 설정이 필요하지 않습니다.

옵션 B : NPM을 통해 설치 (현대 웹 프로젝트의 경우)

프로젝트 디렉토리 에서이 명령을 실행하십시오.

 NPM 설치 부트 스트랩 아이콘

그런 다음 기본 스타일 시트 또는 JS 항목 파일에서 CSS를 가져옵니다 (빌드 설정에 따라 다름) :

 @import "부트 스트랩 -ICONS/font/bootstrap-icons.css";

react, vue 또는 웹 팩 기반 앱에 가장 적합합니다.

옵션 C : SVG 또는 글꼴 다운로드 (수동 제어)

//m.sbmmt.com/link/adad0f2b196a1ed3e3b9d9025c397132 로 이동하거나 "다운로드"를 클릭하거나 Github Repo ( //m.sbmmt.com/link/16b872fc57999900838e19015116768e15015167900838e15015167900838e15015167900838e1515167900838e1515167900838e1515167900838e1515167900838e1515167900838e15151679 아이콘 파일.

개별 SVG를 사용하거나 전체 글꼴 세트를 수동으로 포함시킬 수 있습니다.

✅ 2. 부트 스트랩 아이콘을 사용하는 방법

설치되면 여러 가지 방법으로 아이콘을 사용할 수 있습니다.

방법 1 : <i> 태그 사용 (아이콘에 권장)

부트 스트랩 아이콘은 bi 클래스를 기본으로 사용하고 bi-icon-name 사용합니다.

 <i class = "bi bi-heart"> </i>
<i class = "bi bi-arrow-right"> </i>
<i class = "bi-house-fill"> </i>

공식 문서에서 올바른 아이콘 이름을 사용하십시오 : //m.sbmmt.com/link/adad0f2b196a1ed3e3b9d9025c397132

방법 2 : 다른 요소와 함께

모든 인라인 요소에 클래스를 적용 할 수 있습니다.

 <span class = "bi bi-search"> </span>

Semantic HTML 표준에 맞지 <i> 때 유용합니다.

방법 3 : 개별 SVG 파일 사용 (성능 및 사용자 정의에 가장 적합)

SVG를 다운로드하거나 가져온 경우 직접 사용할 수 있습니다.

 <svg class = "bi"width = "32"height = "32"fill = "currentColor">
  <xlink 사용 : href = "node_modules/bootstrap-icons/bootstrap-icons.svg#heart"/>
</svg>

이 방법은 CSS를 통해 색상/크기를 번들링하고 변경하는 데 좋습니다.

✅ 3. 아이콘 사용자 정의 (크기, 색상 등)

내장 클래스를 사용하여 크기 변경 :

 <i class = "bi bi-star"> </i> <!-기본->
<i class = "bi bi-star bi-lg"> </i> <!-더 큰->
<i class = "bi bi-star bi-2x"> </i> <!-2x 크기->
<i class = "bi bi-star bi-3x"> </i> <!-3x 크기->

텍스트 유틸리티로 색상 변경 (부트 스트랩 CSS를 사용하는 경우) :

 <i class = "bi bi-bell 텍스트 위험"> </i>
<i class = "BI Bi-Bell Text-Success"> </i>

또는 사용자 정의 CSS :

 .BI {
  색상 : #0d6efd;
  글꼴 크기 : 2REM;
}

✅ 4. 팁 및 모범 사례

• 항상 공식 아이콘 라이브러리 에서 올바른 이름을 확인하십시오.
• 번들링하지 않으면 SVG 스프라이트를 통해 많은 아이콘을 사용하지 마십시오.로드 타임이 느려질 수 있습니다.
• 접근성을 위해 아이콘이 장식 인 경우 aria-hidden="true" 추가하십시오.

   <i class = "bi bi-download"aria-hidden = "true"> </i>

• 아이콘이 의미를 전달하는 경우 (예 : "삭제") 적절한 ARIA 레이블 또는 sr-only 텍스트를 사용하십시오.

---

기본적으로 CSS를 포함하고 bi bi-[icon-name] 사용하십시오. 가볍고 문서화되어 있으며 어디에서나 작동합니다. 프레임 워크가 필요하지 않습니다.

위 내용은 부트 스트랩 아이콘 라이브러리를 설치하고 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!