블로그 글을 작성하다 보면 텍스트만으로 표현하기 아쉬울 때가 많다. 이럴 때 아이콘을 적절히 활용하면 글의 가독성을 높이고 시각적인 재미를 더할 수 있다. 특히 개발 블로그나 정보성 글에서는 특정 개념이나 기능을 아이콘으로 직관적으로 나타내면 독자의 이해를 돕는 데 큰 도움이 된다. 이럴때 보통 많이 사용하는 것이 Font Awesome 이라는 폰트 아이콘이다.
Font Awesome 사용을 위해선 티스토리에서 HTML 모드로 전환하여 `<i>` 태그를 직접 입력하는 방법도 있다. 하지만 이 방법은 글쓰기 중 기본 모드와 HTML 모드를 번거롭게 오가야 하며, 그 과정에서 글의 포맷이 깨질 위험이 있어 효율적이지 않다.
그래서 이 글에서는 폰트 어썸 아이콘을 마치 이모티콘처럼 `:아이콘이름:` 패턴(콜론으로 양끝을 감싸는 패턴)으로 간편하게 입력하는 방법을 소개한다. 이 방법을 활용하면 복잡한 HTML 코드 없이도 티스토리의 글쓰기 기본 모드에서 아이콘을 쉽게 삽입할 수 있고 Font Awesome 에서 지원하는 클래스를 그대로 사용할 수 있어 글쓰기 워크플로우를 크게 개선할 수 있다.
:fa-regular fa-camera: :fa-solid fa-image: :fa-regular fa-comment: :fa-regular fa-rotate-right fa-spin: :fa-solid fa-heart fa-beat: :fa-regular fa-eye: :fa-regular fa-folder-open: :fa-light fa-circle-info: :fa-solid fa-film: :fa-solid fa-bomb: :fa-regular fa-circle-check: :fa-light fa-recycle fa-spin: :fa-regular fa-wind: :fa-solid fa-share-nodes: :fa-regular fa-location-arrow: :fa-regular fa-list-ul: :fa-regular fa-code-commit: :fa-regular fa-code-pull-request: :fa-regular fa-code-merge: :fa-brands fa-python: :fa-brands fa-unity: :fa-regular fa-code: :fa-brands fa-apple: :fa-brands fa-github: :fa-regular fa-paperclip: :fa-light fa-thumbs-up: :fa-solid fa-book: :fa-solid fa-pen:
Font Awesome 아이콘, 어떻게 작동하는가?
이 방법의 핵심은 문자열 치환이다. 글 본문에 특정 패턴의 문자열을 입력해두면, 웹페이지가 로드될 때 자바스크립트가 해당 문자열을 찾아 실제 폰트 어썸 아이콘으로 자동으로 변환해준다. 이 과정은 다음과 같은 단계로 이루어진다.
- 폰트 어썸 CSS 파일을 불러와 아이콘 폰트를 활성화한다.
- 자바스크립트가 `:아이콘이름:` 패턴을 찾아 `<i>` 태그로 교체한다.
이러한 자동 변환 방식을 통해 에디터에서는 단순 텍스트를 입력하지만, 실제 웹페이지에서는 멋진 아이콘이 나타나게 되는 것이다.
티스토리 블로그 적용 가이드
아래 코드를 복사해서 티스토리 블로그에 적용하면 바로 사용할 수 있다.
코드 복사하기
먼저, 티스토리 관리자 페이지에 접속하여 스킨 편집 메뉴로 이동한다.
티스토리 스킨 편집 메뉴에서 html 편집 버튼을 누르고 `<head>`와 `</head>` 태그 사이에 아래 코드를 복사해서 붙여넣는다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<script>
document.addEventListener("DOMContentLoaded", function () {
// 티스토리 본문 텍스트가 들어가는 영역 선택
let textNodes = document.querySelectorAll(
"div.tt_article_useless_p_margin.contents_style > *:not(figure):not(pre), .post .content .info .summary"
);
textNodes.forEach(el => {
/**
* Font Awesome 이름 기반 치환
* 정규식 설명:
* :fa-([a-z0-9-]+(?:\s+fa-[a-z0-9-]+)*):
* - :fa- 로 시작
* - fa-로 시작하는 클래스 이름 1개 이상
* - 중간에 공백 + fa-... 이어붙이는 것도 허용
*/
el.innerHTML = el.innerHTML.replace(
/:fa-([a-z0-9-]+(?:\s+fa-[a-z0-9-]+)*):/gi,
(match, classes) => {
return `<i class="fa-${classes}"></i>`;
}
);
});
});
</script>
코드 설명
Font Awesome 불러오기
- CDN(Content Delivery Network)을 통해 폰트 어썸 CSS 파일을 불러온다. 이 파일 덕분에 `<i class="...">` 같은 태그가 실제 아이콘으로 보이게 된다.
자바스크립트 교체 로직
- `document.querySelectorAll()`: 티스토리 스킨의 글 본문 영역을 지정하는 선택자다. 대부분의 스킨에서 이 클래스는 본문 영역을 나타낸다. 만약 코드를 적용했는데 작동하지 않는다면, 이 선택자를 사용하고 있는 스킨의 본문 영역 클래스로 바꿔야 한다.
- `replace()` 함수: 정규 표현식을 사용해 `:fa-이름:` 패턴을 찾아 `<i>` 태그로 바꿔주는 핵심 로직이다. replace 함수를 통해 HTML 문자열을 직접 조작한다.
사용 방법 및 예시
이제 티스토리 글쓰기 화면에서 아래 패턴을 사용하여 아이콘을 쉽게 삽입할 수 있다. 기본모드에서 입력해도 자동으로 변환된다.
Font Awesome Icons 사이트에서 원하는 아이콘의 클래스 이름을 찾아 `:fa-클래스이름:` 형식으로 입력하면 된다. 클래스 이름은 한 개 이상 입력할 수 있다.
예시:
| 입력 패턴 | 렌더링 결과 |
| :fa-solid fa-circle-user: | :fa-solid fa-circle-user: |
| :fa-regular fa-heart: | :fa-regular fa-heart: |
| :fa-brands fa-github: | :fa-brands fa-github: |
| :fa-solid fa-bell fa-shake: | :fa-solid fa-bell fa-shake: |
| :fa-solid fa-spinner fa-spin: | :fa-solid fa-spinner fa-spin: |
마무리
이처럼 간단한 자바스크립트 코드를 활용하면 티스토리에서 아이콘을 훨씬 효율적으로 사용할 수 있다. 복잡한 HTML 코드를 외우거나 매번 HTML 모드로 전환할 필요 없이, 마치 마크다운 문법처럼 간결한 패턴으로 아이콘을 삽입하는 이 방법은 블로그 글쓰기의 즐거움을 더해줄 것이다.
이제 당신의 블로그에 아이콘을 더해 시각적으로 풍부한 콘텐츠를 만들어보자.
'Blog' 카테고리의 다른 글
| [티스토리] 내 블로그, 구글과 네이버 검색 상위에 띄우는 방법 (0) | 2025.11.06 |
|---|---|
| [티스토리] hELLO 스킨의 인라인 코드 블럭을 노션 스타일로 변경하기 (3) | 2025.07.23 |
| [티스토리] hELLO 스킨에 코드 블럭 라인 번호 추가하기 (1) | 2025.07.11 |
| [티스토리] hELLO 스킨에 코드 블럭 복사 버튼 추가하기 (2) | 2025.07.09 |