웹 아이콘 사용하기(font awesome5 & google icon)

웹 아이콘의 장점

01. 일일히 아이콘을 만들지 않아도 되서 편리함

02. CSS 적용가능( 색상과 크기 변경등 )

웹아이콘 사용가능한 곳

01. CDN 연결해주기

- font-awesome 5버전

사이트에서 kit code를 받아주세요!

사이트에 들어가서 이메일을 입력하시면 kit code를 받을 수 있습니다. 받은 kit code를 <head></head>에 넣어주세요.

( EX) W3SCHOOL에서 가져온 예시니 직접사이트에 들어가 받아주세용)

1

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

cs

(버전 5가 나오면서 kit code를 받도록 바뀐거 같다..ㅠㅠ)

02. 아이콘 선택해서 사용하기

- 상단 메뉴에서 icon 선택 or 아이콘이 있는 페이지로 이동

- 원하는 아이콘 선택!

- Start Using This Icon 클릭하면 아래처럼 코드가 나옵니다.

- 코드복사 내가 원하는 위치에 넣고 사용하면 끝!

01. CDN 연결해주기

<head></head>에 다음 내용을 적어주세요.

1
2

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

cs

02. 아이콘 선택해서 사용하기
사이트에 들어가 원하는 아이콘을 클릭하면

이렇게 왼쪽 상단에 쓰는 방법이 나온다. 이미지 파일도 다운로드 가능하고, 저 코드를 입력해주면 아이콘이 나온다!

<i>태그 부분만 복사하여 사용하면 완료.

도라미도라미