부트스트랩 3과 4에서 아이콘 사용

제목에 적었듯 부트스트랩 3과 4에서 아이콘 사용에 대해 적으려 한다. 이 블로그가 부트스트랩3으로 만들었으므로 이 블로그에서 사용하고 있는 어떻게 사용하는지 적어보려 한다. 

부트스트랩3에서 아이콘

부트스트랩3는 기본적으로 위 그림에서 볼 수 있는 약 250개의 Glyphicons이라는 폰트 아이콘을 제공한다. 이 폰트 아이콘은 부트스트랩3을 사용하면 사용할 수 있다. 티스토리 블로그는 본문에 HTML을 지원하고 또한 스킨에 HTML 편집을 할 수 있어서 그 중 몇 개를 나타내면 아래와 같다. 참고로 아이콘의 색은 CSS로 얼마든지 변경할 수 있다. 그리고 아래 아이콘은 그림이 아니니 저장할 수 없다. 폰트 아이콘은 윈도우에 있는 wedings나 windings와 비슷하다고 해야 하나...참고로 2012년 1월 31일에 발표한 버전 2에서도 Glyphicons이 있었던 것으로 안다. 

인쇄하기 검색하기

부트스트랩4에서 아이콘

위에서 적은 부트스트랩3의 폰트 아이콘은 버전 4에서 사라져 사용할 수 없다. 그렇다고 실망할 필요는 없다. 왜냐하면 폰트 아이콘을 무료로 사용할 수 있도록 제공하는 곳이 많기 때문이다. 그곳을 이용하면 불편함이 없다. 이 블로그에서 사용하는 곳은 Font Awesome이라는 것을 사용하고 있다. 이곳은 무료는 1,409개 아이콘을 사용할 수 있고, 유료인 프로까지 합하면 4,566개를 사용할 수 있다. 그런 이유로 4에서 사라진 것이 아닌가 나름 추측해본다. 

그 뿐만 아니라 위를 보듯이 아이콘의 크기를 크게 할 수 있으며 애니메이션도 시킬 수 있다. 그 외에도 레이어, 회전, 마스크 등이 가능하다고 하는데 나는 크기, 애니메이션, 리스트만 사용해봤다.

그래서 위 그림은 부트스트랩4로 만든 다른 티스토리 블로그로 그림을 보듯 Font Awesome 5.5를 사용 중이다. 부트스트랩4 사용 시 폰트 아이콘이 필요하다면 Font Awesome을 사용하면 된다. 참고로 부트스트랩이 아니더라도 아이콘이 필요하다면 Font Awesome을 이용했으면 한다. 

이 블로그는 부트스트랩3으로 만들었지만 폰트 아이콘이 고작 250개라 부족하다. 그래서 1,409 아이콘을 무료로 사용할 수 있는 Font Awesome을 주로 사용한다. 초기에는 부트스트랩에서 제공하는 아이콘을 사용했으나 너무 적어 지금은 Font Awesome만 사용하게 된다. 특히 Font Awesome 버전 4.7을 사용할 때 부트스트랩 옵션이 많았다. 가끔 버전 5.5에서도 친숙한 단어가 보일 것이다. 

위 그림에서 왜 버전 4.7이 있냐고 할 것이다. 그 이유는 4.7 사용한 기간이 오래돼 이 블로그 여러 곳에 적용됐기 때문이다. 버전 5.5 아이콘에 4.7 아이콘을 모두 포함하고 있는데, 5.5와 4.7 아이콘 적용 방식이 다르다. 만약 같았으면 4.7에 대한 문장을 삭제했을 것이다. 그러니 4.7을 그대로 놔두고 있다. 

폰트 아이콘 : Font Awesome