본문 바로가기

CSS

CSS 아이콘 icon

아이콘 추가하는 방법

가장 간단한 방법은 font awesome같은 아이콘 라이브러리를 추가하는 것이다.

<i> 또는 <span>같은 인라인 HTML 요소에 아이콘 클래스의 이름을 명시하면 된다.

아래의 모든 아이콘은 CSS로 커스터마이즈(크기, 색, 음영)될 수 있는 확장성 있는 벡터이다.


Font Awesome Icons

font awesome icons를 쓰기 위해 HTML 페이지 <head> 섹션에 다음을 추가한다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


Bootstrap Icons

bootstrap icons를 쓰기 위해 HTML 페이지 <head> 섹션에 다음을 추가한다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


Google Icons

google icons를 쓰기 위해 HTML 페이지 <head> 섹션에 다음을 추가한다.

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


물론 아이콘 라이브러리의 종류에 따라 class 이름을 다르게 명시해주어야 한다.


https://www.w3schools.com/css/css_icons.asp

'CSS' 카테고리의 다른 글

CSS List  (0) 2018.11.03
CSS Links  (0) 2018.11.03
CSS Fonts  (0) 2018.11.03
CSS text  (0) 2018.11.01
CSS outline  (0) 2018.11.01