[HTML,CSS] icon 삽입 하기

2024. 9. 19. 00:11HTML,CSS

오늘은 버튼 태그를 만들어서 버튼속에 아이콘을 삽입하는 방법에 대해 공유해 보려 한다.

 

+아이콘 넣는 순서

 

 

1.  https://boxicons.com/  BOXICONS사이트에 접속하기

 

 

2.  사이트 오른쪽 상단 Usage 클릭

 

 

3.  스크롤을 내려 아래쪽으로가서  Import the CSS 밑에 link 복사

      전체 복사 후  복사한 링크를 <head>태그 안에 넣기

     +아래 그림 참조

링크를 복사하시오

 

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