Font Awesome 사용법 및 아이콘 겹치기

아무리 Minimal Mistakes 템플릿을 가져다 쓰고 있지만 입맛대로 활용할려면 진짜 할게 많은 것 같다.

Font Awesome Icon 기본 사용법

기본 사용 법은 다음과 같다. <i> 태그의 class에 fa prefix와 fa-icon-name만 해주면 된다. 아이콘 이름은 사이트에서 직접 검색해서 원하는 아이콘으로 하면 된다.

예시로 정보 표시 아이콘을 가져와 보자.

<i class="fa fa-info-circle"></i>

더 많은 사용 법은 아래 링크에 잘 정리되어 있으니 참조하자. 크기, 회전, 애니매이션 등 사용법이 다양하다.

• Font Awesome Examples

Font Awseome Icon 겹치기

예를 들어 위의 원 모양의 아이콘과 화살표 아이콘을 합치고 싶다면?

‘fa-stack fa-크기’로 class를 만들어주고, <i>를 추가할 때 fa-stack-2x는 큰 아이콘에, fa-stack-1x는 작은 아이콘에 넣어주면 된다. 마지막으로, fa-inverse는 색 반전시킬 아이콘에 넣어 준다.

<span class='fa-stack fa-4x'>
        <i class='fa fa-circle fa-stack-2x'></i>
        <i class='fa fa-angle-double-up fa-stack-1x fa-inverse'></i>
</span>

• stackcking icon