에티테마

무료 아이콘 폰트어썸 사용법 4,5,6 버전별로 사용하기

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 작성일 22-03-17 15:56

본문

폰트어썸을 버전별로 사용하기 위해서는 cdn 주소를 링크시켜서 사용하실 수 있습니다.
아래 처럼 해당 사이트에 접속하시게 되면 url 이 나오게 됩니다.

[폰트어썸 4 버전]

폰트어썸4 아이콘 주소
https://fontawesome.com/v4/icons/

cdn 주소
아래 내용을 <head> ... </head> 안에 링크시키기만 하시면 바로 사용이 가능합니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

사용예 - 클래스 이름만 변경하시면 바로 사용이 가능합니다.
<i class="fa fa-address-book" aria-hidden="true"></i>

폰트어썸 크기 조정 예제 
<i class="fa fa-address-book fa-2x" aria-hidden="true"></i>
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<i class="fa fa-address-book fa-5x" aria-hidden="true"></i>
 


2818a3a8c468bdcf5a76e69c517e1e26_1647499957_68.jpg

[폰트어썸 5 버전]

폰트어썸 5 아이콘 주소
https://fontawesome.com/v5/search?m=free

[cdn 주소] 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 

폰트어썸 5 버전은 이전 4 버전과 비교했을 때 아이콘의 종류가 훨씬 다양해지고 디자인이 정교해졌습니다. 
가장 큰 차이점은 아이콘의 성격에 따라 클래스 이름 앞에 붙는 접두사가 달라졌다는 점입니다..

<i class="fas fa-user"></i>
<i class="fab fa-facebook"></i> 

  • fas (Solid): 면이 꽉 찬 스타일 (일반적)
  • far (Regular): 선으로 된 테두리 스타일
  • fab (Brands): 페이스북, 유튜브 등 브랜드 로고 스타일

5 버전 크기 조절 옵션
5 버전은 4 버전보다 더 세분화된 크기 클래스를 제공합니다.
fa-2x 같은 기존 방식 외에도 작은 크기 옵션들이 추가되었습니다.

  • fa-xs: 아주 작게
  • fa-sm: 조금 작게
  • fa-lg: 기본보다 크게
  • fa-2x ~ fa-10x: 2배부터 최대 10배까지 조절 가능
 

적용예제
<i class="fab fa-facebook fa-3x"></i>
<i class="fas fa-user fa-xs"></i> 


2818a3a8c468bdcf5a76e69c517e1e26_1647499908_23.jpg



[폰트어썸 6 버전]

폰트어썸 6 아이콘 주소
https://fontawesome.com/v6/search?m=free

[cdn 주소]
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />


사용예 - 4,5와 클래스 명이 다릅니다. fa-solid 로 되어있습니다.
<i class="fa-solid fa-align-right"></i>

2818a3a8c468bdcf5a76e69c517e1e26_1647500048_54.jpg



[그누보드에 포함되어 있는 폰트어썸 사용하기]

그누보드에서는 폰트어썸5 파일이 포함되어져 있습니다.
사용하기 위해서는 아래 처럼 사용해주시면 됩니다.
<link rel="stylesheet" href="도메인주소/js/font-awesome/css/font-awesome.min.css">
 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.