# 부트스트랩 및 부트스트랩 아이콘(bootstrap icons) CDN

부트스트랩 CDN 사용방법

부트스트랩은 가장 널리 쓰이는 CSS 프레임워크 중 하나입니다.

CSS와 JS를 추가하면 바로 반응형 레이아웃, 다양한 컴포넌트(버튼, 네비게이션바 등)를 사용할 수 있습니다.

 

CDN으로 포함시키기

CSS 불러오기

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" 
rel="stylesheet" 
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" 
crossorigin="anonymous">

 

script 불러오기

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" 
crossorigin="anonymous"></script>

 

그밖의 다양한 import 방법을 원하시면 공식사이트에서 확인할 수 있습니다.

https://getbootstrap.kr/

Bootstrap

 

부트스트랩 아이콘 CDN 사용방법

Bootstrap 팀에서 공식으로 제공하는 아이콘 세트입니다.

SVG 기반이라서 선명하고, 클래스 이름으로 불러와서 쉽게 쓸 수 있습니다.

 

CDN으로 포함시키기

CSS 불러오기

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

 

@import로 포함시키기

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

 

아이콘 사용 예시

<i class="bi bi-alarm"></i>  <!-- 알람 아이콘 -->
<i class="bi bi-heart-fill"></i>  <!-- 하트 아이콘 -->
<i class="bi bi-person-circle"></i>  <!-- 사용자 아이콘 -->

 

아이콘 확인 링크

https://icons.getbootstrap.com/

Bootstrap Icons