https://icons.getbootstrap.com/
Bootstrap Icons
Official open source SVG icon library for Bootstrap
icons.getbootstrap.com
여기에서 다양한 아이콘을 사용할 수 있다.
예시)
위의 말풍선 아이콘을 사용해보겠다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">1. head 태그에 위의 링크를 추가(그래야 아이콘이 뜬다.)
<div class="card-header bi bi-chat-dots"> Comments</div>2. Icon front를 클래스에 다음과 같이 추가했다.
🎶 결과
참고 👇
https://velog.io/@saichoiblog/how-to-use-bootstrap-icon
부트스트랩 아이콘 활용하는 방법
부트스트랩 아이콘을 사용하여 이벤트 넣는 방법
velog.io
반응형
'FE > html' 카테고리의 다른 글
| [Bootstrap] class="invalid-feedback"이 작동하지 않을 때 (0) | 2022.06.06 |
|---|---|
| [Thymeleaf] th:attr로 속성에 값 할당하기 (0) | 2022.06.03 |
| [Error] 부트스트랩 dropdown이 안 될 때 (0) | 2022.04.01 |
| [Thymeleaf] 글 작성자에게만 수정, 삭제 버튼 보이기 (0) | 2022.03.29 |
| [Thymeleaf] th:fragment | th:replace | th:insert (0) | 2022.02.14 |