Font Awesome 사용 방법
8819 단어 htmlfontawesome
오늘 우리는 귀하의 웹 사이트에 Fontawesome을 사용하는 방법을 살펴볼 것입니다!
PRO 버전과 무료 버전이 함께 제공되는 Fontawesome 5를 살펴보겠습니다. 이 기사에서는 무료 버전만 살펴보겠습니다.
Fontawesome 시작하기
가장 빠른 시작 방법은 CDN(콘텐츠 전송 네트워크) 링크를 포함하는 것입니다.
<html>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"
/>
</head>
</html>
이렇게 하면 로컬에 설치할 필요 없이 스타일시트가 로드됩니다.
아이콘 사용
Fontawesome 웹사이트에서 우리가 찾고 있는 아이콘을 찾을 수 있고 속기를 사용하여 아이콘을 사용할 수 있습니다.
<i class="fas fa-clock"></i> <i class="far fa-clock"></i>
이전 버전에 익숙하다면 항상
fa 이제 fas를 사용합니다. 및 far 다음을 의미합니다.Fontawesome 아이콘 스타일링
다음 예와 같이 이러한 아이콘에 인라인 스타일을 사용할 수 있습니다.
<i class="fas fa-car" style="font-size:30px; color: red;"></i>
또는 클래스를 사용하여 if 스타일을 지정할 수 있습니다.
<i class="fas fa-car ferrari"></i>
.ferrari {
font-size: 30px;
color: red;
}
Fontawesome 아이콘 크기 조정
따라서 스타일에서 크기를 정의하는 대신 Fontawesome에서 정의한 클래스를 사용하여 아이콘 크기를 조정할 수 있습니다.
다음 크기를 사용할 수 있습니다.
fa-xs , fa-sm , fa-lg , fa-2x , fa-3x , fa-4x , fa-5x , fa-6x , fa-7x , fa-8x , fa-9x , 또는 fa-10x<i class="fas fa-angellist fa-xs"></i>
<i class="fas fa-angellist fa-sm"></i>
<i class="fas fa-angellist fa-lg"></i>
<i class="fas fa-angellist fa-2x"></i>
<i class="fas fa-angellist fa-5x"></i>
<i class="fas fa-angellist fa-10x"></i>
Fontawesome 목록 아이콘
Fontawesome으로 할 수 있는 또 다른 멋진 일은 목록 항목에 if를 사용하는 것입니다.
<ul class="fa-ul">
<li>
<span class="fa-li"><i class="fas fa-carrot"></i></span>List Item
</li>
<li>
<span class="fa-li"><i class="fas fa-caret-square-right"></i></span>List Item
</li>
<li>
<span class="fa-li"><i class="fas fa-cat"></i></span>List Item
</li>
</ul>
애니메이션 Fontawesome 아이콘
Fontawesome에는 수많은 훌륭한 옵션이 있어 빠르게 애니메이션화할 수도 있습니다.
fa-spin를 사용할 수 있습니다. 아이콘을 회전하고 fa-pulse 8단계로 회전합니다.<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-circle-notch fa-pulse"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
회전 및 뒤집기 아이콘
아이콘을 뒤집거나 회전하고 싶다고 가정해 보겠습니다. Fontawesome에는 이를 위한 클래스도 함께 제공됩니다.
<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-rotate-180"></i>
<i class="fas fa-horse fa-rotate-270"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>
Fontawesome 아이콘 스태킹
아이콘을 서로 쌓도록 선택할 수도 있습니다.
<span class="fa-stack fa-lg">
<i class="fas fa-smoking fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
이 코드펜에서 설명된 모든 데모를 볼 수 있습니다.
펜 참조 How to use Fontawesome 작성자: Chris Bongers( @rebelchris )
에 CodePen .
읽어주셔서 감사합니다. 연결해 보겠습니다!
제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하십시오. 또는
Reference
이 문제에 관하여(Font Awesome 사용 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/how-to-use-fontawesome-46ee텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
