반응형 웹사이트 구축하는데 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