폰트어썸만 있는게 아니다! CSS 웹아이콘 Boxicons 설치 및 사용 방법
유튜브의 알 수 없는 알고리즘이 하나의 영상을 보여줍니다. 해당 영상은 홈페이지를 만드는 과정을 보여주었습니다. 해외 유튜버인 것 같은데 웹아이콘을 폰트어썸을 사용하지 않고 다른 쪽 제품(?)을 사용하더군요. 다시 뒤로 돌려서 어디것을 사용하는지 살펴보니 Boxcions(박스아이콘)이었습니다. 역시 세상은 넓고 능력자는 많아요.
Boxicons 설치하기
박스아이콘은 폰트어썸과 같은 웹아이콘을 제공합니다. 폰트어썸의 경우는 일부 유료지만 박스아이콘은 완전 무료입니다. 물론 언제 유료화가 될지는 모르겠지만 적어도 아직까지는 무료군요.
박스아이콘 홈페이지의 모습입니다. 아래에 링크를 걸어두었으니 바로 방문해 보시기 바랍니다. 홈페이지 방문 후 우측 상단에 있는 Usage 메뉴를 눌러주세요.
Boxicons : Premium web friendly icons for free
Boxicons is a free collection of carefully crafted open source icons. Each icon is designed on a 24px grid with the material guidelines
boxicons.com
여기에서 Import the CSS로 들어가서 <head>엔에 삽입할 링크 태그를 복사합니다.
사용하고자 하는 HTML 문서의 <head> 안쪽에 그대로 붙여넣기 합니다. 이때 저렇게 오류 경고를 띄울 수 있는데 작은 따옴표를 큰 따옴표로 변경해주시면 문제는 해결됩니다. 티스토리의 경우도 동일하게 적용하시면 됩니다.
사용하기
폰트어썸과 사용 방법은 동일합니다.
먼저 마음에 드는 아이콘을 찾습니다. 그리고 누릅니다.
누르면 오른쪽 하단에 이와같은 옵션창이 뜹니다. 여기에서 Font를 누르면 바로 아래에 <i>태그가 보일 것입니다. 해당 i태그를 그대로 클릭하면 복사가 완료됩니다. 이제 사용하고자 하는 HTML에 붙여넣기만 하면 됩니다. 아래는 대충 예시입니다.
See the Pen Using Boxicons Web icon by rgy0409 (@rgy0409) on CodePen.
이런식으로 원하는 아이콘을 적시적소에 배치가 가능합니다. 또한 웹폰트이므로 CSS 스타일도 적용됩니다. 개인적으로 불편한 부분이라고 한다면 클래스명에 작은따옴표를 사용하는게 기본값이기에 브라켓에서 오류를 띄웁니다. 물론 실제로 사용은 가능하지만 그냥 신경이 쓰인달까요? 그래서 박스아이콘을 모두 적용 후 나중에 작은따옴표를 큰따옴표로 일괄 변경하는 방법을 사용하고 있습니다. 끝.
댓글