아이콘 라이브러리
W3.CSS하면 모든 아이콘 라이브러리를 같이 사용할 수 있습니다 :
- 글꼴 최고 아이콘
- 구글 소재 아이콘
- 부트 스트랩 아이콘
아이콘을 사용하여
아이콘을 사용하려면, 그냥 HTML <I> 요소의 클래스에있는 아이콘의 이름을 추가합니다.
아이콘의 크기를 제어, 아이콘의 폰트 크기 속성을 변경하거나 w3- 크기 등급을 사용
- W3 - 작은
- W3 - 작은
- W3 대형
- W3-xxlarge
- W3-xxxlarge
글꼴 최고 아이콘
FA FA-집
FA FA-바
FA FA-화살표 왼쪽
FA FA-화살표 오른쪽
FA FA-검색
FA FA-가까운
FA FA-새로 고침
FA FA-쓰레기
FA FA-남성
FA FA-자동차
FA FA-트럭
FA FA-면
예
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-cloud
w3-large"></i>
<i class="fa fa-cloud w3-xlarge"></i>
<i class="fa fa-cloud
w3-xxlarge"></i>
<i class="fa fa-cloud w3-xxxlarge"></i>
<i class="fa fa-cloud
w3-text-teal"
style="font-size:64px"></i>
</body>
</html>
»그에게 자신을보십시오 
아이콘의 전체 목록을 보려면 : 우리의 아이콘 참조를 방문
구글 소재 디자인 아이콘
집
집
집
메뉴
메뉴
메뉴
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
수색
수색
수색
닫기
닫기
닫기
새롭게 하다
새롭게 하다
새롭게 하다
지우다
지우다
지우다
사람
사람
사람
directions_car
directions_car
directions_car
local_shipping
local_shipping
local_shipping
local_airport
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="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">cloud</i>
<i class="material-icons w3-large">cloud</i>
<i
class="material-icons w3-xlarge">cloud</i>
<i class="material-icons
w3-xxlarge">cloud</i>
<i class="material-icons w3-xxxlarge">cloud</i>
<i
class="material-icons w3-text-teal" style="font-size:64px">cloud</i>
</body>
</html>
»그에게 자신을보십시오 부트 스트랩 아이콘
집
메뉴 햄버거
arrow_back
arrow_forward
수색
없애다
새롭게 하다
폐물
사용자
파일
인쇄
비행기
예
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon
glyphicon-cloud"></i>
<i class="glyphicon glyphicon-cloud w3-large"></i>
<i class="glyphicon glyphicon-cloud w3-xlarge"></i>
<i class="glyphicon
glyphicon-cloud w3-xxlarge"></i>
<i class="glyphicon glyphicon-cloud
w3-xxxlarge"></i>
<i class="glyphicon glyphicon-cloud w3-text-teal"
style="font-size:64px"></i>
</body>
</html>
»그에게 자신을보십시오