부트 스트랩 아이콘 라이브러리를 사용하는 방법

부트 스트랩 아이콘 라이브러리는 프로젝트에 쉽게 추가 할 수있는 아름답고 간결한 아이콘을 제공합니다. 단계는 다음과 같습니다. 부트 스트랩을 설치하여 cdn을 추가하거나 html에 포함시켜 아이콘을 사용하여 아이콘 크기와 색상을 사용자 정의하십시오 (CSS 클래스 사용)

프로젝트에서 부트 스트랩 아이콘 라이브러리를 사용하는 방법

부트 스트랩 아이콘 라이브러리는 부트 스트랩 프로젝트에 추가 할 수있는 간단하고 아름다운 대형 아이콘 컬렉션입니다. 사용 방법은 다음과 같습니다.

1 단계 : 부트 스트랩을 설치하십시오

다음 방법으로 부트 스트랩을 설치하십시오.

 <code class="bash">npm install bootstrap</code>

2 단계 : CDN을 추가하거나 HTML에 포함시킵니다.

HTML 파일에 부트 스트랩 아이콘 라이브러리 CDN을 포함하십시오.

 <code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css"></code>

또는 HTML 파일에 포함 시키십시오.

 <code class="html"><link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css"></code>

3 단계 : 아이콘을 사용하십시오

HTML에서 다음 구문을 사용하여 아이콘을 추가하십시오.

 <code class="html"><i class="bi bi-icon-name"></i></code>

예를 들어, 집 아이콘을 추가하려면 다음을 사용합니다.

 <code class="html"><i class="bi bi-house"></i></code>

아이콘 크기와 색상을 사용자 정의합니다

CSS 클래스를 사용하여 아이콘의 크기와 색상을 사용자 정의 할 수 있습니다.

크기:

• bi-1x : 작습니다
• bi-2x : 중간 크기
• bi-3x : 큰 크기
• bi-4x : 여분의 큰 크기

색상:

• bi-primary : 파란색
• bi-secondary : 회색
• bi-success : 녹색
• bi-danger : 빨간색
• bi-warning : 노란색
• bi-info : 파란색

예를 들어 큰 블루 하우스 아이콘을 추가하려면 다음을 사용하십시오.

 <code class="html"><i class="bi bi-house bi-3x bi-primary"></i></code>

힌트:

• 올바른 아이콘 이름을 사용해야합니다. 전체 아이콘 목록은 공식 부트 스트랩 웹 사이트에서 찾을 수 있습니다.
• 사용자 정의 CSS에서 기본 아이콘 스타일을 무시할 수 있습니다.
• 아이콘 라이브러리에는 bi-border-rounded 및 bi-flip-horizontal 와 같은 유용한 유용한 유틸리티 클래스가 있습니다.

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