w3.css

아이콘

아이콘 라이브러리

W3.CSS를 사용하면 다음과 같이 원하는 아이콘 라이브러리를 사용할 수 있다.

Font Awesome 아이콘
Google Material Design 아이콘
Bootstrap 아이콘

아이콘 라이브러리 사용

아이콘을 삽입하려면:

<head> 섹션에 CDN(Content Delivery Network)의 아이콘 라이브러리를 포함한다.
인라인 HTML 요소에 아이콘 클래스의 이름을 추가한다.

⭐ <i> 및 <span> 요소는 아이콘을 추가하는 데 널리 사용된다.

아이콘의 크기를 제어하려면 아이콘의 글꼴 크기 속성을 변경하거나 w3-size 클래스 중 하나를 사용하자.

w3-tiny
w3-small
w3-large
w3-xxlarge
w3-xxxlarge
w3-jumbo

Font Awesome 아이콘 몇 가지

fa fa-home

fa fa-bars

fa fa-arrow-left

fa fa-arrow-right

fa fa-search

fa fa-close

fa fa-refresh

fa fa-trash

fa fa-male

fa fa-car

fa fa-truck

fa fa-plane

예제

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>

</body>
</html>

Google Material Design 아이콘 몇 가지

home

arrow_back

arrow_forward

refresh

delete

person

directions_car

local_shipping

local_airport

예제

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>

<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>

</body>
</html>

Bootstrap 아이콘 몇 가지

home

menu-hamburger

arrow_back

arrow_forward

remove

refresh

trash

user

file

plane

예제

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>

<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>

</body>
</html>

기본 예시

예제 보기

참고

W3C School - W3.CSS Icons

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기