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

부트 스트랩 아이콘 라이브러리를 사용하여 웹 응용 프로그램에 아이콘을 쉽게 추가하십시오. 단계에는 다음이 포함됩니다 : 아이콘 라이브러리 참조, 아이콘 (클래스 이름별로), 아이콘 크기 조정 (FS-1/2/3/4), 아이콘 색상 변경 (Text-Primary/Secondary 등) 및 클래스를 결합하여 다양한 스타일의 아이콘을 만듭니다.

프로젝트에서 부트 스트랩 아이콘을 사용하는 방법

Bootstrap은 웹 응용 프로그램에 아이콘을 쉽게 추가 할 수있는 아이콘 라이브러리를 제공합니다.

사용 단계 :

1. 부트 스트랩 아이콘 라이브러리 인용

HTML 문서에서 태그 내에 부트 스트랩 아이콘 라이브러리를 참조하십시오.

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

2. 아이콘을 사용하십시오

부트 스트랩 아이콘은 클래스 이름을 사용하여 참조됩니다. 아이콘을 사용하려면 HTML에서 다음 구문을 사용하십시오.

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

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

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

3. 아이콘 크기

"FS-"클래스를 추가하여 아이콘을 크기를 조정할 수 있습니다. 사용 가능한 크기는 다음과 같습니다.

• FS-1 (24px)
• FS-2 (16px)
• FS-3 (12px)
• FS-4 (10px)

예를 들어, 하우스 아이콘을 중간 크기로 설정하려면 다음을 사용합니다.

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

4. 색상

"텍스트"클래스를 사용하여 아이콘의 색상을 변경할 수 있습니다. 사용 가능한 색상은 다음과 같습니다.

• 텍스트-프라이팬
• 텍스트 고등
• 텍스트-확장
• 텍스트 위험
• 텍스트 경고
• 텍스트 인포
• 텍스트 어두운

예를 들어, 하우스 아이콘을 파란색으로 설정하려면 다음을 사용합니다.

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

5. 콤비네이션

이 클래스를 결합하여 다양한 스타일의 아이콘을 만들 수 있습니다. 예를 들어, 중간 크기의 녹색 "하우스"아이콘을 만들려면 다음을 사용하십시오.

 <code class="html"><i class="bi-house fs-2 text-success"></i></code>

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