먼저 CDN을 통해 외부로 불러와서 적용하는 방식은 다소 느릴 수 있기 때문에 티스토리 서버에 직접 업로드하여 사용하는 것이 가장 빠르고 편합니다. 만약 직접 설정하는 것도 귀찮다 하시는 분들은 CDN 주소를 통해 외부 파일을 불러와서 웹사이트에서 아이콘폰트를 적용시키면 되겠습니다.
(1) 외부 CDN을 이용하여 적용하는 방법
CDN Fontawesome (The iconic SVG, font, and CSS toolkit)
font-awesome - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
font-awesome - The iconic SVG, font, and CSS toolkit - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
cdnjs.com
<html>
<!--CDN Fontawesome -->
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
</head>
</html>
언제나 그렇듯이 Link 속성을 이용하여 외부 파일을 읽습니다. rel은 속성값이고 css는 스타일시트로 스타일시트 파일을 다운받아 적용한다고 생각할 수 있습니다. 이렇게 한 줄 코드를 선언해주면 Fontawesome의 무료 아이콘을 사용할 수 있게 됩니다.
(2) 티스토리 서버에 직접 올려서 적용하는 방법
방법은 어렵지 않습니다. 다만 티스토리 서버(HTML 편집기 → 업로드)에 해당 아이콘 JS파일을 업로드합니다. 그리고 Link 속성을 이용해서 HTML 내에 선언해주거나 직접 Scrpt 속성을 통해서 불러와도 됩니다.
먼저 위의 파일을 다운로드 받습니다. 파일명은 다른 걸로 변경해주셔도 좋습니다.
<script type="text/javascript" src="./images/all.min.js"></script>이렇게 Fontawesome 사용 조건을 완료했다면, 아이콘 속성으로 아이콘을 사용하거나 유니코드를 통해서 아이콘을 적용할 수 있습니다. 아이콘 폰트는 Fontawesome 공식 사이트에 어떻게 적용할 수 있는지 직접 확인이 가능합니다. 유니코드의 경우에는 아이콘 검색에서 우측에 알림 아이콘을 클릭하면 Cheatsheet을 활성화하여 유니코드명을 확인할 수 있습니다.
유니코드는 스타일시트에서 Content 속성을 활용하여 적용할 수 있습니다. 아래는 예시입니다.
content: "\f105";
font-weight: 900;
font-family: "Font Awesome 5 Free";간혹 안되는 경우도 있는데, 그럴 경우에는 (1)이나 (3)의 방법을 통해 쉽게 구현하는 것도 괜찮다.
(3) 공식홈페이지에서 제공하는 키트 코드를 받아 HTML에 작성
공식홈페이지에서도 키트 툴로 한줄 코드를 받아 적용이 가능합니다. 아래와 같이 개별 자바스크립트 파일로 연결하여 아이콘을 사용할 수 있습니다.
<script src="https://kit.fontawesome.com/6efc4610ce.js"></script>
'Tistory > Tistory Skin' 카테고리의 다른 글
| 티스토리 단축키 추가방법 (0) | 2020.10.05 |
|---|---|
| 티스토리 공지사항 치환자 사용방법과 예시 (0) | 2020.09.23 |
| 티스토리 카테고리의 다른글 카테고리 이름추가(인덱스 치환자) (0) | 2020.08.06 |
| 티스토리 스킨 검색창(Search) 만드는 방법 (0) | 2020.06.28 |
| 티스토리 스킨 가이드 (2) | 2020.06.03 |
| 티스토리 HTML 스킨편집 단축키 (0) | 2020.05.31 |
| 티스토리 스킨 JQuery 슬라이드 자동 넘김 (2) | 2019.12.21 |
| 티스토리 더보기 버튼 디자인(CSS) (0) | 2019.11.01 |
