[ 웹 기능 구현 ] Boxicons 사용해서 무료 아이콘 사용 방법

 

웹 개발을 하다 보면 메뉴 바가 접혔을 때 사용할 아이콘

 

또는 무언가를 넘길 때 사용할 화살표 아이콘 등 

 

아이콘을 사용할 일들이 생깁니다.

 

많은 사이트들이 무료로 아이콘을 제공해줍니다.

 

오늘은 그중 Boxicons를 사용해 봅시다.

 

Boxicons

Boxicons : Premium web friendly icons for free

 

STEP 1

 

위에 제공된 링크로 들어가서 "Usage"를 눌러주세요.

 

 

STEP 2

 

왼쪽에 "Import the CSS"를 선택해주세요.

 

 

STEP 3

 

빨간 박스의 link를 복사해서 본인 프로젝트의 html 안에 적어 주세요.

 

 

복사한 링크는 head 태그 안에 적어주세요.

 

 

STEP 4

 

이제 아이콘을 추가할 수 있습니다.

 

1. Boxicons 메인 페이지로 돌아가 주세요.

2. 검색창에 원하는 아이콘을 검색해 주세요.

3. 제공되는 아이콘 중에 원하는 아이콘을 클릭해 주세요.

 

STEP 5

 

아이콘을 사용하시기 위해 선택권이 두 가지가 있습니다.

1. 다운로드하여 사용하기

2. "Font"를 눌러 html에 태그를 추가해서 사용하기

 

저는 두 번째 방법으로 추가할 예정입니다.

 

 

STEP 6

 

빨간 박스 안에 <i> 태그를 복사해 주세요.

 

 

STEP 7

html 안에 사용하고 싶은 위치에 적어 주세요.

 

저는 <a> 태그 안에 넣어 깃 아이콘 눌러지면 github사이트로 이동하는 아이콘을 만들었습니다.

 

 

EXTRA

아이콘의 크기와 색깔을 변경할 수 있습니다.

 

1. <a> 태그 안에 class를 만들어 줍니다.

2. css 파일에서 만들어준 class를 불러와 원하는 스타일로 스타일링해주세요.

 

 

background-color: 아이콘에 뒷배경 색깔 설정

color: 아이콘 색깔 설정

padding: 아이콘 뒷배경 여백 설정

border-radius: 모서리 둥글게 설정

display: 아이콘 위치 설정