여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 아이콘
w3.css – 아이콘
3개월전 작성
4개월전 수정

w3.css

아이콘

아이콘 라이브러리

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

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

아이콘 라이브러리 사용

아이콘을 삽입하려면:

  1. <head> 섹션에 CDN(Content Delivery Network)의 아이콘 라이브러리를 포함한다.
  2. 인라인 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
home
menu
menu
arrow_back
arrow_back
arrow_forward
arrow_forward
search
search
close
close
refresh
refresh
delete
delete
person
person
directions_car
directions_car
local_shipping
local_shipping
local_airport
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

search

remove

refresh

trash

user

file

print

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>
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그