이 글에서 이미지 아이콘이 아닌 이 블로그에서 사용하는 아래와 같은 폰트 아이콘 사용에 대해서 적으려고 한다. 폰트 아이콘 사용에 대해서 2018/11/22 - 부트스트랩 3과 4에서 아이콘 사용에서 약간 적은 적이 있으니 참고했으면 한다. 폰트 아이콘을 사용하면 무료(free)로 1,409개, 유료(pro)로 4,566개 벡터 아이콘을 사용할 수 있다. 참고로 폰트 아이콘은 <head> 태그에 코드를 넣을 수 있으면 된다. 네이버 블로그는 불가능하니 고생 말았으면 한다.



이 페이지만이 아닌 이 블로그에 거의 모든 아이콘은 이미지 아이콘이 아닌 폰트 아이콘이다. 만약 폰트 아이콘을 제공하는 곳이 한국이라면 카카오톡, 카카오스토리, 밴드 등으로 공유하는 아이콘도 폰트 아이콘을 사용했을 것이다. 하지만 그곳을 보니 브랜드에 인 라인 아이콘만 있었다. 그래서 현재는 이미지 아이콘을 사용 중이다. 현재 폰트 아이콘 서비스에서 제공하는 브랜드 아이콘이 390개 있다. 그중에서 삼성, LG, 현대자동차 등의 브랜드는 없었다. 


코드를 HEAD 태그에 삽입




폰트 아이콘을 사용하기 위해 fontawesome 홈페이지를 방문하여 Start for Using Free 버튼을 클릭하여 그 페이지에서 제공하는 코드를 복사한 후 HTML 편집 페이지에서 <head>와 </head> 태그 사이에 붙인다. 나는 위 그림과 같이 했고 왜 1번이 있는지 2018/11/22 - 부트스트랩 3과 4에서 아이콘 사용에 설명했다. 처음 사용자는 1번을 헷갈릴 필요 없이 무시하면 된다.  

폰트 아이콘 사용


위와 같이 화면 Font Awesome에서 제공하는 아이콘을 사용할 수 있다. 희미한 회색은 유료(Pro)이고 검정이 무료(Free) 아이콘이다. 아이콘을 찾는 방법은 검색을 통하거나 페이지에서 상단의 Icons를 클릭해서 수동으로 찾는다. 영어 키워드를 통해 검색해야 하므로 주로 카테고리로 찾는다. 


스킨이나 글에서 아이콘을 사용하기 위해서 HTML 코드를 얻어야 한다. 아이콘을 클릭한 후 위 그림 2번을 클릭하여 그 아이콘에 대한 HTML 코드가 복사된다. 스킨이나 글에 그 HTML 코드를 쓰면 아이콘이 나타나게 된다. 예로 사과 아이콘을 나타내기 위해 사과 아이콘의 HTML 모드에서 HTML 코드를 아래 그림과 4번과 같이 써주면 된다.  




아이콘의 크기, 회전, 애니메이션, 레이어 등은 3번 Docs를 보고서 아이콘에 레이어, 회전, 크기 등을 설정하여 나타낸 경우다. 참고로 아이콘은 항상 정적이지 않다.


'정보/스크립트.HTML.CSS.치환자' 관련된 글