동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
동영상 강좌보기
아이콘을 추가하는 방법
HTML페이지에 아이콘을 추가하는 가장 간단한 방법은 Font Awesome과 같은 아이콘 라이브러리를 사용하는 것입니다.
지정된 아이콘 클래스의 이름을 인라인 HTML요소(예:<i>또는 <span>)에 추가하십시오.
아래 소개하고 있는 아이콘 라이브러리에 있는 모든 아이콘은 CSS(크기, 색상, 그림자 등)로 사용자 정의할 수 있는 확장 가능한 벡터입니다.
Font Awesome Icons
Font Awesome Icon을 사용하려면 <head>섹션내에 아래 행을 추가하십시오.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
** 다운로드 또는 설치가 필요하지 않습니다.
<!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>Bootstrap Icons
부트스트랩 glyphicons을 사용하려면 <head>섹션안에 아래 행을 추가하십시오.
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
** 다운로드 또는 설치가 필요하지 않습니다.
<!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>Google Icons
구글 아이콘을 사용하려면 <head>섹션안에 아래 행을 추가하십시오.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
** 다운로드 또는 설치가 필요하지 않습니다.
<!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>등록된 댓글이 없습니다.