부트스트랩 아이콘은 2,000개 이상의 아이콘이 있는 무료 고품질 오픈 소스 아이콘 라이브러리이며, SVG, SVG 스프라이트 또는 웹 글꼴 등 원하는 대로 포함가능하다. 아이콘을 적당히 잘쓰면 깔끔한 디자인의 웹페이지를 만들 수 있다. Bootstrap Icons 을 hugo 프로젝트에 연동하는 법을 정리해본다.
1. static 폴더에 Bootstrap Icons 복사
부트스트랩 아이콘 zip 파일을 이 주소 https://github.com/twbs/icons/releases/latest/ 를 통해서 받도록 한다. 받은 파일을 폴더채 풀고, hugo 프로젝트 static 폴더내에 위치시킨다. 모든 아이콘을 다 넣을 필요는 없고, 필요한것만 선택하고 나머진 지워서 넣어도 된다. font 폴더가 있는데 그건 필요하니 지우지 않는다.
2. head 부분에 bootstrap-icons.min.css 참조
해당 부트스트랩 아이콘들을 사용하려면 bootstrap-icons.min.css 파일을 참조시켜야 한다. head 부분에 넣으면 되고, hugo 의 경우, 사용자 입력을 위한 head_custom.html 파일이 있으니 그 파일에 아래 코드를 추가하면 된다. 위치는 /layouts/partials 폴더 하위에 있다.
<link rel="stylesheet" href="/bootstrap-icons/font/bootstrap-icons.min.css">
3. shortcode 생성
알다시피 hugo 에서는 마크다운을 사용하여 컨텐츠를 만들기 때문에 바로 html 을 사용할 수 없다. 이런경우를 대비하여 hugo 에는 shortcode 라는 기능을 제공하고 있다. /layouts/shortcodes 하위에 icon.html 로 파일을 만들었다. 파라메터가 있는 경우 Get 명령어를 이용해서 가져와 바인딩 할 수 있으니 참고한다. 참고로 각 아이콘 마다 설명페이지가 있으니, Class 정보는 거기에서 확인한다.
<i class="bi {{ .Get 0 }}"></i>
셋팅은 끝. 사용해보자.
그러면 이렇게, hugo에서도 아이콘을 출력할 수 있게 된다. 아래처럼 hugo 마크다운에서 사용하면 된다.
{{< icon bi-amazon >}}
{{< icon bi-apple >}}
{{< icon bi-twitter >}}
{{< icon bi-instagram >}}