티스토리 블로그 스킨 편집을 위해 FONT Awesome 사용하기

 

안녕하세요, 자투리입니다~
오늘은 벡터기반의 웹폰트 아이콘을 사용할 수 있게 해주는 FONT Awesome에 대해 간단히 알아보고자 합니다.

FONT Awesome에 대해 자세히 알려면 html, css등을 알아야 하는데요...
저도 이쪽에 손을 놓은지는 꽤 시간이 지나서, 관련된 자세한 내용은 검색을 권장 드리구요~^^
단순히, 티스토리 블로그의 스킨을 편집하다가 이 부분을 모르면 편집이 어려운 부분이 있어, 이 부분을 위한 포인트식 포스팅 올립니다.

---

티스토리의 블로그의 스킨 중, 아래와 같이 페이스북*트위터*유튜브 등의 링크를 모아둔 프로필 영역이 있는 것들이 있는데요, 바로 아이콘들이 FONT Awesome에서 제공하는 아이콘입니다.

어떤 스킨엔 인스타그램 아이콘이, 어떤 스킨엔 유튜브 아이콘이 없을 수도 있는데...
이럴 경우, FONT Awesome에서 아이콘을 찾아, 티스토리의 HTML편집기에서 수정해 주면 되는데요.

---

바로 하나의 예제를 보면서, 정리해 보겠습니다.

1. 티스토리의 HTML편집기로 가서 관련 부분을 찾아줍니다. (div class="social" 을 검색하시면 됨)

---

2. 아래와 같이 쓰지 않는 '워드프레스' 부분이 보이는데, 이 부분을 '유튜브'로 변경할 것입니다.

---

3. 일단, FONT Awesome의 사이트로 들어가서,
https://fontawesome.com/icons?from=io

---

4. youtube를 검색해 주면, 아래와 같이 나오는데, 2번째 보이는 스퀘어아이콘을 사용하면 되며, 해당 코드는 'youtube-square'임을 알 수 있습니다.

---

5. 다시, 티스토리 HTML편집기로 돌아와, 아까 봤던 부분의 코딩을 아래와 같이 수정해 주면 끝입니다.
- href : 연결될 페이지의 경로를 넣고,
- class : 방금 봤었던 'youtube-square'로 수정,
- style : 원하는 색상코드를 넣어주면 됩니다.