[HTML] <i> 태그로 아이콘 넣기

<i> 태그는 원래 "italic"을 나타내기 위해 사용되었지만, 최근에는 HTML에서는 주로 아이콘을 삽입할 때 사용되고 있다.

 

FontAwesome과 같은 라이브러리와 <i> 태그를 사용하면 특정 아이콘 클래스를 적용하여 아이콘을 쉽게 추가할 수 있게된다.

 

아이콘을 적용하는 순서

1. FontAwesome CSS 링크 추가

헤드 태그 안에 FontAwesome CSS 링크를 추가하여 아이콘을 사용할 수 있도록 한다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

 

2. 아이콘 클래스 적용

<i> 태그에 fa와 특정 아이콘 이름 클래스를 추가하여 원하는 아이콘을 표시한다.

ex)

<i class="fa fa-id-badge me-2"></i>

 

 

주로 많이 사용하는 아이콘은 아래와 같이 다양하게 있고 더 많은 아이콘은 FontAwesome 페이지에서 복붙해서 사용이 가능하다.

fa-user: 사용자 아이콘

fa-envelope: 이메일 아이콘

fa-phone: 전화기 아이콘

fa-id-badge: ID 배지 아이콘

fa-users-cog: 사용자 설정 아이콘

fa-toggle-on: 토글 스위치 아이콘

fa-sticky-note: 메모 아이콘

 

Font Awesome

 

 

 

물론 비슷한 놈으로 부트스트랩 아이콘도 있으니 취향에 맞게 사용하기

Bootstrap Icons