CSS 아이콘, 부트 스트랩 아이콘, 구글 아이콘 사용방법

2023. 1. 27. 11:02

아이콘을 추가하는 방법

아이콘 라이브러리를 사용하여 HTML 페이지에 아이콘을 쉽게 추가할 수 있다.

가장 간단한 방법은 Font Awesome과 같은 아이콘 라이브러리를 사용하는 것입니다.

<li>, <span> 같은 인라인 태그에 지정된 아이콘 클래스의 이름을 추가한다.

아이콘 라이브러리의 모든 아이콘은 CSS(크기, 색상, 그림자 등)로 사용자 정의할 수 있는

확장 가능한 벡터이다.

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

crossorigin 속성에 대하여...

<audio>, <img>, <link>, <script>, <video>에 있는 crossOrigin 속성은

element가 CORS 요청을 처리하는 방식을 명시하여

element가 fetch한 데이터를 CORS 가능하게 합니다.

특정 element에서는 CORS 세팅 속성이 될 수도 있습니다.

더 자세한 내용은

https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/crossorigin 참고한다.

간단한 예시를 들어보자!

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>

결과

부트스트랩 아이콘

부트스트랩 글리피콘을 사용하면 간단하게 아이콘을 추가할 수 있다.

<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>

결과

구글 아이콘

링크 추가

<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>

'Web > CSS' 카테고리의 다른 글

CSS 표 적용하기 (0)	2023.01.27
CSS List (목록) (0)	2023.01.27
Google Fonts (구글 글꼴) (0)	2023.01.27
CSS selector (0)	2023.01.06
CSS 기본 기능 정리 2 (글꼴) (0)	2023.01.05

doornuddle