HTML: 아이콘 폰트에 대해서 알아봅시다!

아이콘 폰트 (Icon Font)

아이콘들을 폰트와 비슷한 속성으로 만들어서 마치 폰트처럼 아이콘을 사용할 수 있도록 하는 방법

• 이미지가 백터 그래픽 형태로 되어 있어, 크기를 늘리든 줄이든 상관없이 선명한 화질을 보장
• 색상도 일반 웹폰트처럼 CSS에서 color 속성으로 변경 가능
• 단색으로만 설정 가능

• 이용법
  • Font Awesome 사이트 바로가기
  • DN을 통해서 설치 or 아이콘 폰트를 다운로드받아서 설치
  • 아이콘이 나타나기를 원하는 위치에 사이트에 있는 코드 (예시 참고) 삽입

    <i class="fa fa-instagram" aria-hidden="true"></i>

  • 가능한 기능들
    • 아이콘 크기변경 (Larger Icons)
    • 아이콘 넓이고정 (Fixed Width Icons)
    • 리스트 블릿 변경 (List Icons)
    • 테두리 적용과 좌측 또는 우측 고정 아이콘 (Bordered & Pulled Icons)
    • 아이콘 애니메이션 (Animated Icons)
    • 아이콘 회전 (Rotated & Flipped)
    • 아이콘 테두리변경 (Stacked Icons)

출처