Bootstrap Icons

아이콘

설치

Bootstrap Icons은 npm으로 배포되지만 수동으로 다운로드할 수도 있습니다.

패키지 관리자

npm 또는 Composer로 SVG, 아이콘 스프라이트, 아이콘 폰트가 포함된 Bootstrap Icons를 설치하세요. 그런 다음에 사용법에서 아이콘을 포함할 방법을 선택하면 됩니다.

npm i bootstrap-icons

composer require twbs/bootstrap-icons

다운로드

모든 버전은 GitHub에 게시되며, SVG, 폰트, 라이선스, readme가 포함되어 있습니다. 우리의 개발 워크플로에 주로 사용하는 npm 스크립트가 작성된 package.json도 포함되어 있습니다.

최신 ZIP 다운로드

CDN

jsDelivr를 통해서 아이콘 폰트 스타일시트를 웹사이트 내의 <head>나 @import를 통해 포함시켜서 빠르게 시작하세요. 아이콘 폰트 문서에서 예제를 확인할 수 있습니다.

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

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

사용법

Bootstrap Icons는 SVG이기 때문에 프로젝트 구성 방식에 따라 몇 가지 방법으로 이를 HTML에 포함시킬 수 있습니다. font-size를 통해 쉽게 크기를 조정할 수 있도록 width: 1em (및 선택적으로 height: 1em)을 사용하는 것이 좋습니다.

임베드

아이콘을 (외부 이미지 파일이 아닌) 페이지의 HTML에 임베드합니다. 여기에서는 커스텀 width와 height를 사용하고 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-heart-eyes" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M11.315 10.014a.5.5 0 0 1 .548.736A4.498 4.498 0 0 1 7.965 13a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242.63 0 1.46-.118 2.152-.242a26.58 26.58 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zM4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434zm6.488 0c1.398-.864 3.544 1.838-.952 3.434-3.067-3.554.19-4.858.952-3.434z"/></svg>

스프라이트

SVG 스프라이트를 사용해서 <use> 요소로 아이콘을 삽입합니다. fragment 식별자로는 아이콘의 파일명을 사용합니다 (예: toggles는 #toggles). SVG 스프라이트에서는 <img> 요소와 마찬가지로 외부 파일을 참조할 수 있지만, currentColor를 이용해서 간단하게 테마를 설정할 수 있습니다.

주의! Chrome에서 <use>가 여러 도메인 간에 작동하지 않는 문제가 있습니다.

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"/>
</svg>

외부 이미지

Bootstrap Icons의 SVG를 지정 디렉토리에 복사하면 일반 이미지처럼 <img> 요소로 포함시킬 수 있습니다.

<img src="/assets/icons/bootstrap.svg" alt="Bootstrap" width="32" height="32">

아이콘 폰트

각 아이콘의 클래스를 가진 아이콘 폰트도 Bootstrap Icons에 포함되어 있습니다. CSS를 통해 페이지 내에 아이콘 웹 폰트를 넣어 필요에 따라 HTML 내에서 클래스를 사용할 수 있습니다 (예: <i class="bi-alarm-clock"></i>).

font-size나 color를 사용해서 아이콘의 모습을 변경할 수 있습니다.

<i class="bi-alarm"></i>

<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

CSS

CSS 내에서 SVG를 사용할 수도 있습니다 (헥스 색상 값을 지정할 때 #은 %23로 입력하는 것처럼 모든 문자를 이스케이프 처리해야 함). <svg>에서 너비와 높이를 통해 크기를 지정하지 않으면 아이콘이 사용 가능한 공간을 채웁니다.

background-size로 아이콘의 크기를 조정하려면 viewBox 속성이 필요합니다. xmlns 속성은 필수 속성입니다.

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

Styling

.text-* 클래스 또는 커스텀 CSS로 색상을 변경할 수 있습니다:

<svg class="bi bi-exclamation-triangle text-success" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

접근성

아이콘을 장식용으로만 쓴다면 aria-hidden="true"를 추가해주세요. 그게 아니라면 적절한 대체 텍스트를 제공해야 합니다. 아이콘을 추가할 때 사용한 방법과 아이콘을 사용하는 위치 (예: 독립 이미지 또는 버튼 또는 유사한 컨트롤의 유일한 컨텐츠)에 따라 다양한 방법이 있습니다. 다음은 몇 가지 예시입니다:

<!-- alt="..." on <img> element -->
<img src="/assets/icons/bootstrap.svg" alt="Bootstrap" ...>

<svg class="bi" ... role="img" aria-label="Tools">
  <use xlink:href="bootstrap-icons.svg#tools"/>
</svg>

<!-- aria-label="..." on the control -->
<button ... aria-label="Mute">
  <svg class="bi bi-volume-mute-fill" aria-hidden="true" ...>
  ...
  </svg>
</button>

SVG로 작업하기

SVG는 작업하기에 훌륭하지만 해결해야 할 몇 가지 알려진 단점이 있습니다. SVG를 사용할 수 있는 방법은 여러가지라는 점을 고려해 이러한 속성과 해결 방법은 코드에 포함하지 않았습니다.

알려진 문제점:

SVG는 Internet Explorer 및 Edge Legacy에서 기본적으로 포커스를 받습니다. SVG를 포함할 때 focusable="false"를 <svg> 요소에 추가하세요. Stack Overflow에서 자세히 알아보세요.
<img> 요소로 SVG를 사용할 때 스크린 리더는 이를 이미지로 알리지 않거나 이미지를 완전히 건너뛸 수 있습니다. 문제를 방지하려면 <img> 요소에 추가적으로 role="img"를 포함시켜야 합니다. 자세한 사항을 이 글에서 확인해보세요.
Internet Explorer에서는 외부 SVG 스프라이트가 정상적으로 작동하지 않을 수 있습니다. 필요하다면 svg4everybody 폴리필(polyfill)을 사용해보세요.

SVG와 관련된 다른 문제를 발견하셨나요? 이슈를 만들어서 세부 사항을 공유해주세요.