W3.CSS 아이콘
아이콘 라이브러리
W3.CSS를 사용하면 다음과 같이 원하는 아이콘 라이브러리를 사용할 수 있습니다.
- 글꼴 멋진 아이콘
- Google 머티리얼 디자인 아이콘
- 부트스트랩 아이콘
아이콘 라이브러리 사용
아이콘을 삽입하려면:
- <head> 섹션에 CDN(Content Delivery Network)의 아이콘 라이브러리를 포함합니다.
- 인라인 HTML 요소에 아이콘 클래스의 이름을 추가합니다.
팁: <i> 및 <span> 요소는 아이콘을 추가하는 데 널리 사용됩니다.
아이콘의 크기를 제어하려면 아이콘의 font-size 속성을 변경하거나 w3- size 클래스 중 하나를 사용하십시오.
- w3-작은
- w3-작은
- w3-대형
- w3-xxlarge
- w3-xxxlarge
- w3 점보
일부 글꼴 멋진 아이콘
파파홈
파바
fa fa-화살-왼쪽
fa fa-화살표-오른쪽
fa fa-search
fa fa-close
파파-리프레쉬
fa-쓰레기
아프다
파파카
FA 트럭
파 플레인
예시
<!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 머티리얼 디자인 아이콘
집
집
집
메뉴
메뉴
메뉴
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
검색
검색
검색
닫다
닫다
닫다
새로 고치다
새로 고치다
새로 고치다
삭제
삭제
삭제
사람
사람
사람
방향_자동차
방향_자동차
방향_자동차
지역 배송
지역 배송
지역 배송
지역 공항
지역 공항
지역 공항
예시
<!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>
일부 부트스트랩 아이콘
집
메뉴 햄버거
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="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>