JINSTORY

Records/Info Memo

[CSS] 티스토리 스킨 - FontAwesome 아이콘 삽입

티스토리 스킨에 FontAwesome을 적용한 방법을 정리합니다.

FontAwesome 아이콘

필요한 아이콘의 css/html/code 등을 다운로드 받을 수 있다. (버전 확인 후 복사/다운로드해서 사용하면된다.)

아이콘을 삽입할 부분에 HTML을 입력하거나, 적용할 클래스에 css를 설정해주면된다. (나는 태그 앞 부분에 표시할 아이콘은 CSS-code로, 사이드바에 아이콘은 html로 설정했다.)

티스토리 스킨 변경 전/후

태그

  • 태그 앞에 아이콘 넣은 후

태그는 마음에 드는데.. (나머지는 별로다 추후에 더 마음에 드는 걸로 바꾸는 걸로...😥 )

그 외

  • 메뉴 아이콘
    • 변경 전
    • 메뉴 아이콘변경 후
      2. font-size:xx-large;
  • 본문 인트로 부분
    • 변경 전
    • 변경 후

FontAwesome 아이콘 삽입 과정

태그에 적용한 방법을 간단히 정리하면 다음과 같다.

HTML

1. <head></head> 사이에 하기 코드 입력
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/solid.min.css" />

CSS

2. 적용할 클래스에 font-family:FontAwesome;,content:"\code" 입력
# 태그에 적용한 CSS
.article .tag-trail a[rel='tag']:before{
    content:"\f02b";
    font-family:FontAwesome;
    padding-right:.5em;
}
저작자표시 비영리 변경금지

'Records > Info Memo' 카테고리의 다른 글

[MARKDOWN] PDF ⇔ 마크다운 파일 변환 (PDF to Markdown)  (0) 2021.11.16
[CSS] Custom Property - CSS 변수 정의  (0) 2021.11.13
[구글크롬] 확장프로그램 추천  (0) 2021.11.08
[GCP] Google Cloud Skill Boost Promotion - 구글 코세라 강의 한달 무료 등록  (0) 2021.11.07
[Markdown] 마크다운 글 색상/형광펜, 이미지 크기조정/캡션삽입  (1) 2021.10.30

티스토리툴바