font awesome (아이콘 사용) > 기타팁(프로그램)

• 목록

• 페이스북 공유
• 트위터 공유

안녕하십니까?

유토하우스 유토맨입니다

https://fontawesome.com/v4/icons/

적용

https://yyjily.tistory.com/118

*아이콘을 회전시키는법

<i class="fas fa-tasksfa-spin"></i>

fa-spin라는 class이름을 추가하면 아이콘을 빙글빙글 돌릴 수 있습니다. 실제로 봅시다.

html코드

<iclass="far fa-lemon-o fa-spin"></i><iclass="fas fa-cog fa-spin"></i>

*아이콘 색상을 바꾸는법

아이콘 색상을 바꿀때는 i태그에 좋아하는 이름의 class를 추가하고 그것에 대해서 CSS에서 색상을 지정합니다.예를 들어 다음과 같이 씁니다.

html 코드

<iclass="fas fa-tag my-gray"></i><iclass="fas fa-tag my-skyblue"></i><iclass="fas fa-tag my-orange"></i>

CSS 코드

.my-gray{color: gray}.my-skyblue{color: skyblue}.my-orange{color:#fecb81}

*아이콘의 크기를 바꾸는법

<i class="fas fa-tasksfa-lg"></i>

FontAwesome에서는 아이콘의 크기를 간단히 바꿀 수 있습니다.이하의 코드를i class="〜"안에 쓰는것으로 크기를 키울 수 있습니다.

fa-lg(1.333…배)

fa-2x(2배)

fa-3x(3배)

fa-4x(4배)

fa-5x(5배)

*표시 각도를 바꾸는법

<i class="fas fa-tasksfa-rotate-90"></i>

이하의 class이름을 추가 아이콘을 기울이고 표시시킬 수도 있습니다.

fa-rotate-90:90도 기울인다

fa-rotate-180:180도 기울인다

fa-rotate-270:270도 기울인다

*반전시키는법

<i class="fas fa-tasksfa-flip-horizontal"></i>

별로 사용할 기회는 없을지도 모르지만 반전시킬 수도 있습니다.

지정 없이:

fa-flip-horizontal:수평 방향으로 반전

fa-flip-vertical:수직 방향으로 반전

*아이콘을 선으로 둘러쌓는법

<i class="fas fa-tasksfa-border"></i>

<iclass="fas fa-tasks fa-2x fa-border"></i>

*브랜드계의 아이콘을 사용하는 경우에는 font-family을 바꾼다.

브랜드계의 아이콘을 사용할 때는 font-family이름을 "font Awesome 5 Brands"으로 지정합니다.

<p>이것은<span class="twitter">트위터</span>입니다.</p>【CSS】

.twitter:before {

  font-family: "Font Awesome 5 Brands";

  content: '\f099';

}