🔮 BootStrap5 아이콘 사용법 정리

Style Sheet/Bootstrap5

🔮 BootStrap5 아이콘 사용법 정리

인파_ 2021. 10. 19. 04:05

BootStrap 5 icons

대표적인 폰트 아이콘으로는 폰트어썸(FontAwesome), XEIcon, Google Icon Fonts 등이 있습니다.

부트스트랩 아이콘(Bootstrap Icons)은 폰트 어썸처럼 사용하기 매우 쉽습니다.

더불어 svg 아이콘을 이미지로 다운로드 받을 수도 있고, svg 코드를 사용할 수도 있도록 다양하게 편의를 제공합니다.

Bootstrap Icons

Official open source SVG icon library for Bootstrap

icons.getbootstrap.com

NPM

> npm i bootstrap-icons

CDN

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

부트스트랩 아이콘 적용법

<i> 태그로 적용 방법

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

<body>
  <i class="bi-check fs-5"></i>
  <i class="bi-arrow-right-circle fs-5"></i>
</body>

하나씩 알아보도록 하겠습니다.

<i class="bi-check fs-5"></i>

에서 ~~bi-~~ 다음의 아이콘 명을 적어주시면 그 아이콘으로 적용되게 됩니다.

만일 사과 아이콘을 적용하고 싶다면 ~~bi-apple~~ 이라고 써주면 적용 됩니다.

~~fs-5~~ 는 font-size 5배수 크기 의 약자입니다.

만일 좀더 상세하게 아이콘의 속성을 조정하고 싶다면, css에서 아이콘 클래스명을 정의해 사용할수 있습니다.

.bi-check{
    font-size: 22px;
    line-height: 22px;
    color:crimson;
}

<svg> 태그로 적용 방법

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

<body>
  <!-- 그대로 body 태그안에 붙여넣으면 됩니다. -->
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-watch" viewBox="0 0 16 16">
    <path d="M8.5 5a.5.5 0 0 0-1 0v2.5H6a.5.5 0 0 0 0 1h2a.5.5 0 0 0 .5-.5V5z"/>
    <path d="M5.667 16C4.747 16 4 15.254 4 14.333v-1.86A5.985 5.985 0 0 1 2 8c0-1.777.772-3.374 2-4.472V1.667C4 .747 4.746 0 5.667 0h4.666C11.253 0 12 .746 12 1.667v1.86a5.99 5.99 0 0 1 1.918 3.48.502.502 0 0 1 .582.493v1a.5.5 0 0 1-.582.493A5.99 5.99 0 0 1 12 12.473v1.86c0 .92-.746 1.667-1.667 1.667H5.667zM13 8A5 5 0 1 0 3 8a5 5 0 0 0 10 0z"/>
  </svg>
</body>

[부트스트랩 아이콘 svg 코드에서 크기와 색상 변경하기]

svg 코드를 넣은 경우 코드 내부의 속성을 변경해서 크기와 색상을 변경할 수 있습니다.

CSS 선택자로 디자인 할 수 있습니다.

svg.className {
    width: 100px;
    height: 100px;
    color: limegreen;
}

보너스) 부트스트랩 아이콘 클릭 이벤트 예시

See the Pen 부트스트랩 아이콘 클릭이벤트 예시 by barzz12 (@inpaSkyrim) on CodePen.

# 참고자료

https://www.inflearn.com/blogs/1446