안녕하세요 오늘은 select 박스에 아이콘 넣는 방법을 알려드릴게요!
그 전에 먼저 소개할 사이트가 있습니다
font awesome 이라는 사이트인데요
일부 아이콘을 무료로 제공해주기 때문에 퍼블리싱을 할 때 아주 유용하게 사용하는 사이트랍니다.
일단 여기 아이콘을 사용하도록 할게요
여기서 잠깐..! (...?????)
보통 오픈소스 아이콘을 사용할 때는
이런 <i> 태그를 복사해서 사용하지만
select 박스에 아이콘을 넣을 때는 이런 방식으로 적용하면 아이콘이 뜨지 않아요
우리는 font awesome 이 제공하는 다른 서비스를 사용하여 select 박스에 아이콘을 넣을 수 있어요
fontawesome 사이트를 맨 아래로 스크롤 하면 제일 하단에 Cheatsheet라는 링크를 볼 수 있어요
여길 클릭하면
이런 사이트가 나오는데요 여기에 있는 아이콘들을 사용해야합니다.
여기 아이콘들 옆에는 코드가 하나씩 달려있는데요 이걸 유니코드(unicode)라고 부릅니다.
자, 이제 우리가 넣을 select option 에 이 코드를 삽입해 볼 차례입니다.
<HTML 영역>
이 코드를 삽입할 때 코드 앞에 &#x를 붙여줍니다.
이유는 그냥 사용하니까 적용이 안됐는데 &#x를 붙여서 사용하니 적용이 되더라구요
<CSS 영역>
select와 option 둘 다에
font-family: "Font Awesome 5 Free";
font-weight:900;
를 적용해줍니다.
저는 별모양 아이콘을 사용했지만 다른 아이콘을 사용하시는 분들은
이 표를 참고하셔서 적용하시면 됩니다.
(style 의 링크를 클릭하면 해당 스타일의 아이콘을 보여줍니다.)
아, 이걸 보시려면 하단의 링크로 들어가거나,
font awesome cheatsheet 페이지 하단의 CSS pseudo-elements 링크를 클릭하여 이동하시면 됩니다.
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
Font Awesome
fontawesome.com
그리고 잊지말아야할 마지막
CDN 연결하시거나 font awesome 에서 제공하는 파일을 연결하셔야 기본적인 font awesome 아이콘이 동작합니다.
짜잔~
그럼 이렇게 select 박스에 별이 등장하게 됩니다
잘 작동되시나요?
혹시 잘 안된다면 제가 참고한 이 사이트도 한번 참고해보세요
https://learncodeweb.com/web-development/icons-show-in-html-select-options/
Icons show in HTML select options - LearnCodeWeb
Icons show in HTML select options. create custom icons and show in html select tag. Example code to display icons in select tag.
learncodeweb.com
끝!
'웹 퍼블리셔 기록 > css' 카테고리의 다른 글
| :after 과 ::after 의 차이점은 바로 이것입니다. (0) | 2021.03.23 |
|---|---|
| CSS 초보 팁 : z-index 값을 아무리 올려도 작동이 안돼요 (0) | 2020.05.28 |
| input checkbox CSS 설정 방법 (0) | 2020.04.22 |
