[HTML,CSS] icon 삽입 하기
2024. 9. 19. 00:11ㆍHTML,CSS
오늘은 버튼 태그를 만들어서 버튼속에 아이콘을 삽입하는 방법에 대해 공유해 보려 한다.
+아이콘 넣는 순서
1. https://boxicons.com/ BOXICONS사이트에 접속하기
2. 사이트 오른쪽 상단 Usage 클릭
3. 스크롤을 내려 아래쪽으로가서 Import the CSS 밑에 link 복사
전체 복사 후 복사한 링크를 <head>태그 안에 넣기
+아래 그림 참조
4. 다시 메인 화면으로 돌아와서 원하는 아이콘을 검색한다
ex) user를 검색 > 검색 후 하단 Font 클릭 > 클릭시 바로 복사됨
5. 복사한 icon 폰트 <button>태그 안에 넣기
ex) <button><i class='bx bxs-user'></i></button>
6. 마지막으로 여러가지 스타일을 적용하여 아이콘을 넣은 멋진 버튼 완성하기
'HTML,CSS' 카테고리의 다른 글
| [CSS]Flex box (0) | 2024.09.22 |
|---|---|
| [HTML,CSS] 구글폰트 사용하는 법 (0) | 2024.09.22 |
| contenteditable div에 placeholder추가하기 (2) | 2024.09.18 |
| CHAPTER3> div와 span태그의 차이, 시맨틱 태그 (0) | 2024.08.31 |
| CHAPTER2> 태그 (0) | 2024.08.29 |