반응형 웹사이트 구축하는데 Bootstrap 로 주로 공부하며 사용하고 있다. 웹페이지에 가끔 인스타그램, 트위터 같은 아이콘이 필요할 때가 있다. 이미지로 할 수도 있지만, 아이콘으로도 추가할 수 있다. Bootstrap 에서는 아이콘도 무료로 배포하여 사용할 수 있게 되어 있다.
Bootstrap Icons 을 사용하는 방법은 3가지가 있다. 하나씩 알아보자.
1.Package Manager 로 설치하여 사용
nodejs 를 사용하여 웹사이트를 구축 중이라면, 패키지 매니저인 npm 을 이용하여 Bootstrap Icons 을 설치할 수 있다.
$ npm i bootstrap-icons
그러면 본인의 프로젝트에 node_modules 폴더에 설치된 것을 확인할 수 있다. 그러고나서 svelte 파일에 css파일만 import 하고, i 태그를 이용해서 호출만 하면된다.
<script>
import 'bootstrap-icons/font/bootstrap-icons.css'
</script>
<i class="bi bi-amazon"></i>
<i class="bi bi-apple"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
그러면 이렇게, 웹페이지에서 아이콘을 출력할 수 있게 된다.
이 클래스는 어떻게 아냐면, 각 아이콘 마다 설명페이지가 있고, 거기에 잘 나와있다.
2. 직접 Download 하여 사용
nodejs 를 쓰지 않더라도 직접 Bootstrap Icons zip 파일을 다운받아 본인 웹프로젝트에 직접 넣으면 된다. 여기를 클릭해서 들어간 웹페이지에 bootstrap-icons-1.11.2.zip 링크가 있으니 클릭해서 받는다. 이 zip 파일을 본인 프로젝트의 static 파일(css, js 등)들을 저장하는 폴더내에 넣어놓는다. svelte 프로젝트의 경우, static 폴더 하위에 위치시키면 된다.
그리고나서, static 폴더내에 넣은 Bootstrap Icons의 css 파일을 참조해야 하는데, svelte의 경우 <svelte:head> 를 이용한다.
<svelte:head>
<link rel="stylesheet" href="/bootstrap-icons-1.11.2/font/bootstrap-icons.min.css">
</svelte:head>
<i class="bi bi-amazon"></i>
<i class="bi bi-apple"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
3. CDN 링크를 이용
npm 을 이용한 설치도 하기 싫고, 직접 다운로드하여 셋팅하기도 싫다면, 그냥 CDN 링크를 이용하여 참조만 시키면 된다. 사실 가장 간편한 방법이다. svelte의 경우 <svelte:head> 를 이용한다.
<svelte:head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
</svelte:head>
<i class="bi bi-amazon"></i>
<i class="bi bi-apple"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
본 예제들의 실행결과를 확인할 수 있는 링크도 넣어놓는다.
- Svelte에서 Bootstrap Icons 사용하기 - 1.Package Manager
- Svelte에서 Bootstrap Icons 사용하기 - 2.Download
- Svelte에서 Bootstrap Icons 사용하기 - 3.CDN