아이콘

설치

Bootstrap Icons는 npm으로 배포되지만, 원한다면 직접 다운로드할 수도 있습니다.

npm

커맨드 라인에서 npm을 통해 Bootstrap Icons를 설치하세요.

npm install bootstrap-icons

다운로드

릴리즈는 GitHub에 배포됩니다. 모든 아이콘 SVG와 라이선스 및 설명서가 번들에 포함되어 있습니다. 개발 워크플로우를 위해서는 npm 스크립트를 사용하는 것을 권장하지만 package.json 또한 포함되어 있습니다.

최신 ZIP 다운로드

사용법

Bootstrap Icons는 SVG이며, 프로젝트 구성에 따라서 HTML에 포함할 수 있는 여러 방법이 있습니다. Bootstrap Icons는 font-size를 통한 쉬운 크기 조절을 위해 기본적으로 1emwidthheight를 포함하고 있습니다.

임베디드

HTML에 아이콘을 임베드합니다 (외부 이미지 파일과 다릅니다). 커스텀 widthheight을 사용한 예시입니다.

<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>

외부 이미지

디렉토리에 원하는 Bootstrap 아이콘 SVG를 복사시킨 후 일반적인 이미지처럼 <img> 요소로 인용하세요.

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

CSS

CSS 내에서 SVG를 사용할 수 있습니다 (헥스 컬러 (16진수) 를 정의할 때 #에서 %23과 같은 문자로 이스케이프하지 않도록 해주세요). <svg>에서 widthheight가 지정되어 있지 않다면, 아이콘은 사용할 수 있는 공간을 채웁니다.

background-size로 아이콘 크기를 조절하려면 viewBox 속성이 필요합니다. xmlns 속성이 필요하다는 것도 알아두세요.

.bi::before {
  display: inline-block;
  content: "";
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

스타일링

.text-* 클래스 및 커스텀 CSS를 통한 지정으로 색상을 변경할 수 있습니다:

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

SVG로 작업

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

SVG와 관련해서 우리가 알아야 할 다른 문제가 생겼나요? 자세한 정보를 이슈를 열어서 공유해주세요.