입력창 앞에 아이콘을 넣거나 폼 필드에 아이콘을 추가 할 때 유용하게 사용할 수 있는 코드 1가지를 알아 보겠습니다.
입력창에 아이콘 추가 – 미리보기
아래 샘플 이미지를 보시면 입력창에 아이콘 추가가 어떤 기능인지 알 수 있습니다. 아이디/비밀번호 입력란에 사람 모양과 자물쇠 모양 아이콘이 있으며, 아이디나 비밀번호를 입력하면 하단 이미지처럼 아이콘이 위쪽으로 이동합니다.
코드 & 코드 설명
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">먼저 Bootstrap Icons를 추가합니다. 부트스트랩에서 제공하는 아이콘을 이용하기 위한 필수 링크로 <head></head>사이에 추가 합니다.
<div class="form-floating">
<input type="text" class="form-control" id="username" name="username" placeholder="아이디" required>
<label for="username">
<i class="bi bi-person me-2"></i>아이디
</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="password" name="password" placeholder="비밀번호" required>
<label for="password">
<i class="bi bi-key me-2"></i>비밀번호
</label>
</div>입력창의 label 태그 안에 아이콘을 추가합니다. 입력창에 <i class=”bi bi-person me-2″></i>아이디, 이렇게 앞쪽에 아이콘을 표시하는 코드를 넣어 주면 됩니다. 아주 간단합니다.
자주 사용되는 Bootstrap Icons
자주 사용되는 Bootstrap Icons:
- 사용자: bi-person
- 비밀번호: bi-key 또는 bi-lock
- 이메일: bi-envelope
- 전화번호: bi-telephone
- 검색: bi-search
다른 아이콘이 필요하시다면 Bootstrap Icons 공식 웹사이트에서 찾아보실 수 있습니다.
위 글은 블로그의 ‘coding&web‘ 카테고리로 분류되었으며, 관련된 글을 더 많이 참고할 수 있습니다.
