CSS 아이콘이란 무엇입니까?
아이콘은 CSS로 사용자 정의할 수 있는 확장 가능한 벡터 라이브러리로 제공됩니다.
공통 라이브러리는 다음과 같습니다.
- 글꼴 멋진 아이콘
- 부트스트랩 아이콘
- 구글 아이콘
어떻게?
<head>아이콘을 사용하려면 HTML 페이지 의 아이콘 라이브러리 섹션에 대한 링크를 추가하기만 하면 됩니다.
다운로드나 설치가 필요하지 않습니다!
아이콘을 삽입하려면 아이콘 클래스의 이름을 <i>또는 와 같은 인라인 HTML 요소에 추가하십시오 <span>.
글꼴 멋진 예
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa
fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
전체 아이콘 목록(Font Awesome, Bootstrap 및 Google)은 W3School의 Icon Reference 를 방문하십시오 .
부트스트랩 예제
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon
glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i
class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon
glyphicon-thumbs-up"></i>
</body>
</html>
구글 예시
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i
class="material-icons">favorite</i>
<i
class="material-icons">attachment</i>
<i
class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
전체 아이콘 튜토리얼
아이콘에 대한 간략한 설명입니다.
전체 아이콘 튜토리얼을 보려면 W3Schools 아이콘 튜토리얼로 이동하십시오 .
전체 아이콘 참조를 보려면 W3Schools 아이콘 참조로 이동하십시오 .