티스토리 Font Awesome 사용법

2022. 2. 15. 19:26

728x90

웹페이지 제작이나 블로그 글 작성시에 아이콘 설정은 사용자에 보다 직관적이고 글을 이해하기 쉽게 하는데 도움을 줍니다. 예를 들어 주의 표시라는 글을 아이콘으로 대체함으로서 페이지를 보다 깔끔하게 예쁘게 작성 할수 있습니다.

웹 아이콘 폰트는 여러 종류가 있으나 제일 많이 사용하는 fontawesome 을 사용 하는 방법에 대해 알아보겠습니다.

Font Awesome 라이브러리 추가

CDN 웹폰트 라이브러리 버전 확인 및 링크 복사
2022년 4월 기준 최신 버전을 사용 하겠습니다.
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css

https://cdnjs.com/libraries/font-awesome

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make

cdnjs.com

티스토리 스킨 편집 (HTML - 라이브러리 링크 추가 )

티스트로리 스킨 편집을 통해 복사한 font-awesome 라이버리 경로를 html 태그의 <head> ~</head> 사이에 추가해줍니다.

<!-- web Font -->	
<!--link rel="stylesheet" href="복사한 cdn 라이브러리 웹 경로" /-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

서식 추가 및 Font Awesome 적용

이제부터 Font Awesome 적용 해서 티스토리에 적용 하는 방법에 대해 알아보겠습니다.

티스토리 관리자 페이지 에서 서식 관리 -> 서식쓰기를 버튼을 클릭후 자주 사용하는 서식을 만들어보겠습니다.

아이콘 종류 확인

https://fontawesome.com/icons

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

에는 2022년 4월 기준으로 2009 개의 무료로 사용할수 있는 아이콘이 존재 합니다.

저는 경고 표시 아이콘을 가지고 테스트를 해보겠습니다.

아이콘 서식 적용 확인 하기

서식 -> 서식 글쓰기 버튼을 눌러서 테스트할 서식을 만드세요

글쓰기 모드는 기본 모드 -> HTML 모드로 꼭 바꾸서 확인해주세요
적용해볼 아이콘 이미지는 복사한 후 미리보리를 통해 추가된 아이콘을 확인해보세요

아이콘 이미지를 이용한 서식 적용

아래 링크에는 아이콘에 대한 다양한 스타일 변경에 대한 예시가 있습니다.

꾸미고 싶은 데로 내용 참고 하셔서 적용하시면 좋을것 같습니다.

저는 간단하게 우선 주의 표시를 위한 서식을 만들어 보았습니다.

<div class="fa-1g">
   <i class="fa-solid fa-triangle-exclamation fa-fade" style="color:#FBB6BD" > 주의 </i>
</div>
<p class="alert alert_warning" style="border-top: 1px solid #f67280; background-color: #fff5f7;" >※ 주의</p>

아이콘 Styling

아래 링크에 가시면 아이콘에 대한 다양한 이미지 변경 방법에 대해 소개가 되고 있습니다.

천천히 보면서 나만에 아이콘을 만들어서 블로그에 적용해 보세요

https://fontawesome.com/docs/web/style/styling

Styling with Font Awesome

Font Awesome 6 brings loads of new icons and features to the most popular icon set in the world.

fontawesome.com

색상변경

<span style="font-size: 3em; color: Tomato;">
    <i class="fas fa-camera"></i>
  </span>

  <span style="font-size: 48px; color: Dodgerblue;">
    <i class="fas fa-camera"></i>
  </span>

  <span style="font-size: 3rem;">
    <span style="color: Mediumslateblue;">
    <i class="fas fa-camera"></i>
    </span>
</span>

Relative Sizing

<!-- Relative Sizing -->
<p> Relative Sizing </p>
  <p><i class="fa-solid fa-coffee fa-2xs"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-xs"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-sm"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-lg"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-xl"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-2xl"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>

Literal Sizing

<!--Literal Sizing -->
<p> Literal Sizing  </p>
  <i class="fa-solid fa-camera fa-1x"></i>
  <i class="fa-solid fa-camera fa-2x"></i>
  <i class="fa-solid fa-camera fa-3x"></i>
  <i class="fa-solid fa-camera fa-8x"></i>
  <i class="fa-solid fa-camera fa-9x"></i>
  <i class="fa-solid fa-camera fa-10x"></i>

vertically aligning icons

<!-- vertically aligning icons -->
<p>vertically aligning icons</p>
<div style="font-size: 2rem;">
  <div><i class="fa-solid fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
  <div><i class="fa-solid fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
  <div><i class="fa-solid fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
  <div><i class="fa-solid fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
  <div><i class="fa-solid fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>

Fade

<!--Fade -->
<p>Fade</p>
<div class="fa-3x">
  <i class="fa-solid fa-triangle-exclamation fa-fade"></i>
  <i class="fa-solid fa-skull-crossbones fa-fade"></i>
  <i class="fa-solid fa-desktop-arrow-down fa-fade"></i>
  <i class="fa-solid fa-i-cursor fa-fade" style="--fa-animation-duration: 2s; --fa-fade-opacity: 0.6;" ></i>
</div>

Beat

<!-- Beat -->
<p> Beat</p>
<div class="fa-3x">
  <i class="fa-solid fa-circle-plus fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s;" ></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 2s;"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-beat-scale: 2.0;"></i>
</div>

Beat-Fade

<!--Beat-Fade-->
<p> Beat-Fade</p>
<div class="fa-3x">
  <i class="fa-solid fa-triangle-person-digging fa-beat-fade"></i>
  <i class="fa-solid fa-square-exclamation fa-beat-fade"></i>
  <i class="fa-solid fa-poo-bolt fa-beat-fade" style="--fa-beat-fade-opacity: 0.1; --fa-beat-fade-scale: 1.25;" ></i>
  <i class="fa-solid fa-circle-info fa-beat-fade" style="--fa-beat-fade-opacity: 0.67; --fa-beat-fade-scale: 1.075;" ></i>
</div>

Bounce

<!-- Bounce --> 
<p>Bounce</p>
<div class="fa-3x">
  <i class="fa-solid fa-basketball fa-bounce"></i>
  <i class="fa-solid fa-volleyball fa-bounce"></i>

  <!-- bounce animation with no "squish" -->
  <i class="fa-solid fa-frog fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1; " ></i>

  <!-- bounce animation with no "squish" or "rebound" -->
  <i class="fa-solid fa-envelope fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1; --fa-bounce-rebound: 0;" ></i>
</div>

728x90

'99. 블로그 꾸미기 > 스킨편집' 카테고리의 다른 글

티스토리 이미지 사이즈 줄이기 (0)	2022.05.24
[티스토리]코드 블럭 line number 추가 (0)	2022.02.15
[티스토리]코드블럭 테마 적용 (1)	2022.02.14

모두의 지식 저장고