|
티스토리 Font Awesome 사용하여 인포그래픽 폰트 아이콘 삽입하는 방법 |
|
환경: Internet Explorer 11 |
Font Awesome 은 텍스트 방식으로 만든 아이콘을 말합니다. 웹 브라우저에서는 Font Awesome 에서 제공하는 CSS 파일을 이용해서 아이콘을 적용할 수 있습니다. 그림이 아니며 아이콘이 모여 있는 글꼴이라고 생각하시면 됩니다. 이 폰트 파일을 받아서 컴퓨터에 설치해 두면 각종 문서에 적용이 가능합니다. 이것은 그림이 아니기 때문에 속도가 빠를 뿐만 아니라 모든 웹 브라우저에 호환이 됩니다. 그리고 폰트 아이콘은 벡터 방식이기 때문에 확대해도 깨지지 않는 장점이 있습니다.
▼ Font Awesome 사이트는 다음과 같습니다. 홈페이지에 접속해서 폰트를 다운받습니다. 파일은 컴퓨터에서 사용할 수 있는 ttf 뿐만 아니라 웹 브라우저에서 사용이 가능한 css 도 있습니다.
|
¤ 티스토리 적용을 위한 소스 수정 |
▼ 물론 Font Awesome 에서 CSS 를 다운받아 서버에 올려서 사용하지 않아도 됩니다. CDN 서버를 제공하고 있기 때문에 바로 링크해서 이용하시면 트래픽 부하를 줄일 수 있습니다. 링크 파일 주소는 아래와 같습니다.
|
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/ css/font-awesome.min.css" rel="stylesheet" /> |
▼ 관리자로 들어가서 HTML/CSS 편집창을 엽니다. 그리고 <HEAD> 사이에 CSS 외부 링크를 복사해서 붙여 넣습니다. 그럼 사용을 위한 환경설정은 끝난 것입니다.
▼ 이제 사이트에 아이콘을 표시해 보겠습니다. 아이콘을 적용하려면 <i> 태그를 사용합니다. 아래 샘플에는 클래스에 3가지가 들어가 있는데 첫 번째 들어간 fa-li 는 리스트를 만들 때 조금 들여쓰기를 하기 위한 클래스입니다. 그리고 fa 는 공통적으로 쓰이는 스타일들을 모아 둔 것입니다. 그래서 아이콘에 해당하는 클래스와 함께 쓰입니다. 마지막으로 fa-folder 는 폴더 아이콘을 나타냅니다. 실제 아이콘 클래스는 fa-folder 가 되겠죠.
|
<i class=”fa-li fa fa-folder”></i> |
▼ fa-folder 와 같이 자신이 찾는 아이콘이 있다면 홈페이지의 아이콘 목록을 참고하면 됩니다. 아래 링크 주소를 클릭 몇 백 개의 아이콘들을 볼 수 있습니다. 그리고 현재에서 계속해서 아이콘들이 추가되고 있습니다.
'블로그' 카테고리의 다른 글
| 티스토리 헤더 타이틀 이미지 변경, 교체하는 방법 (3) | 2018.11.23 |
|---|---|
| 티스토리 스킨 수정을 위해 html css 편집하는 방법 (4) | 2018.11.14 |
| 티스토리 동일 아이디 동시 사용 알림 확인하는 방법 (1) | 2018.11.03 |
| 티스토리 블로그 유튜브 본문에 삽입하는 방법 (3) | 2018.10.14 |
| 티스토리 현재 적용된 스킨 저장, 관리하는 방법 (1) | 2018.07.20 |
| 티스토리 Google 애드센스(AdSense) 배치용 플러그인 사용하기 (1) | 2018.07.17 |
| 티스토리 댓글 아이디 별로 한번에 확인하는 방법 (0) | 2018.07.05 |
| 티스토리 카테고리 다른 글 영역 보이게 하거나 표시 개수 변경하는 방법 (0) | 2018.07.02 |
