이 블로그는 부트스트랩 버전 3으로 만들었고 다른 티스토리를 만들었다. 거기에서 버전 5의 여러 기능을 보고 있다. 알고 있듯이 버전 5는 아이콘을 제공하므로 1,500개 이상의 아이콘이 있는 고품질 오픈 소스 아이콘 라이브러리를 제공한다고 알 것이다.
부트스트랩 버전 3에서 Glyphicons이라는 216개의 아이콘을 제공하지만 그렇게 유용하지 않아 이 블로그는 Font Awesome에서 제공하는 아이콘을 사용하게 됐다. 그 사이트에서 무료로 1,608개의 아이콘을 사용할 수 있다. 그리고 회전, 크기 확대만 아니라 애니메이션도 제공한다. 참고로 유료로 사용한다면 7,8646개를 사용할 수 있다.
폰트 아이콘도 폰트이고 아이콘을 모은 폰트로 보통 인터넷을 이용하여 아이콘을 천 개 이상을 사용하게 할 수 있다. 만약 폰트 아이콘을 제대로 사용하는 것을 보고 싶다면 FontAwsome 홈페이지를 방문해보면 된다.
내가 부트스트랩 버전 5로 만든 티스토리에 부트스트랩 아이콘을 적용했다. 버전 5인 경우 100% 부트스트랩으로 만들고 싶었다. 버전 5에서 제공하는 아이콘을 사용하려는데 아이콘의 유니코드(Unicode)를 제공하지 않는다는 것을 알았다. Font Awesome 사이트의 아이콘을 사용한 사람은 알겠지만 아래 그림 빨간색 사각 형 안처럼 아이콘마다 유니코드(Unicode)를 제공한다.
아래 그림을 보듯이 카테고리 다른 글에서 현재 보고 있는 글 앞에 폰트 아이콘을 추가했다. 그러기 위해서는 유니코드(Unicode)가 필요한데 부트스트랩 5에서 제공하지 않으니 할 수 없이 Font Awesome의 폰트를 사용할 수밖에 없다. 폰트 아이콘에서 유니코드를 제공하면 아주 유용하다. 예전에 특정 카테고리에서만 특정 아이콘을 추가한 적이 있다.
유니코드가 아닌 <i class="fab fa-accusoft"></i> 코드 사용은 글 제목, 카테고리 제목 등 여러 곳에 폰트 아이콘을 사용했다. 글에서 보이는 것은 이미지가 아니고 폰트 아이콘이다.
하지만 아래 그림을 보듯이 부트스트랩 버전 5 아이콘의 경우는 유니코드(Unicode)를 제공하지 않는다. 부트스트랩 버전 5 아이콘인 경우 Font Awesome 사이트에 없었던 SVG 코드를 제공한다. 참고로 부트스트랩 5에서 제공하는 아이콘 및 사용법은 여기를 보면 된다.
티스토리 에디터에서 HTML로 SVG 코드를 사용하여 원을 만드니 아쉽게 원이 사라졌다. 부트스트랩 버전 5의 SVG 파일을 다운로드했어 여기에 올리려 했는데 너무 작아 아래를 보듯이 대신에 Font Awesome의 SVG를 올렸다. 알고 있듯이 벡터 이미지인 SVG는 확대 수에 상관없이 질에 영향이 없다.
폰트 아이콘을 네이버 블로그 등에서 사용할 수 없다. 이 글을 쓰면서 알았는데 네이버 블로그에서 SVG를 업로드할 수 없다는 것을 알았다. 그래도 SVG 이미지는 지원할 것으로 알았다. 내가 리눅스 민트를 사용하기 때문은 아닐 것이다.
여러 블로그를 비교하다 보면 네이버 블로그는 특정 파일 형식을 지원하지 않는다는 것을 알게 된다. 최근에 WebP를 지원하지 않는다는 것을 알았다.
'IT.인터넷.생활 관련 > 부트스트랩' 카테고리의 다른 글
| 부트스트랩에서 중단점을 기기로 생각하면 이해가 쉽다. (0) | 2022.07.16 |
|---|---|
| 개발자가 아닌 나에게 부트스트랩 (0) | 2022.06.20 |
| 부트스트랩, 변화된 container (0) | 2022.05.10 |
| 부트스트랩, 콘텐츠를 포함하는 container (0) | 2022.04.20 |
| 부트스트랩5 플러그인이 없다면? (0) | 2022.01.01 |
| 어떻게 부트스트랩을 사용할지... (0) | 2021.12.05 |
| 부트스트랩5에서 벽돌쌓기, Masorny 레이아웃 구현 (2) | 2021.08.03 |
| 다양한 부트스트랩 버전 소스를 얻을 수 없구나! (0) | 2021.06.09 |
