본문 바로가기
HTML/CSS문법

CSS Icons

by flycoding 2023. 8. 10.
반응형

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

 

CSS icon 예제

 

CSS 아이콘 추가하기

HTML 페이지에 아이콘을 추가하는 가장 간단한 방법은 Font Awesome과 같은 아이콘 라이브러리를 사용하는 것이다.

지정된 아이콘 클래스의 이름을 인라인 HTML 요소(예: <i> 또는 <span>)에 추가한다.

아래 아이콘 라이브러리의 모든 아이콘은 CSS(크기, 색상, 그림자 등)로 사용자 정의할 수 있는 확장 가능한 벡터이다

 

font awesome icons

Font Awesome icon을 사용하려면 fontawesome.com 으로 이동하여 로그인한 후 HTML 페이지의 <head> 섹션에 추가할 코드를 얻는다:

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

참고: 다운로드 또는 설치가 필요하지 않습니다!

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>

<h1>Font Awesome icon 라이브러리</h1>

<p>Font Awesome icons:</p>
<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>

<p>스타일된 Font Awesome icons (size and color):</p>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

kit.fontawesomecom 라이브러리에서 설정하고 '<i class...' 에 'fas fa-cloud', 'fas fa-heart', 'fas fa-car', 'fas fa-file', 'fas fa-bars' 아이콘을 출력한다.

아래 '<i class...'에는 아이콘에 font-size, color 등 스타일을 적용하였다. 위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS font awesome icon 활용 예제

 

Bootsrap icon

bootstrap glypyicons 을 사용하려면 HTML 페이지의 <head> 섹션 내에 다음 행을 추가합니다:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ">

참고: 다운로드 또는 설치가 필요하지 않다!

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="container">

<h1>부트스트랩 아이콘 라이브러리(Bootstrap icon library)</h1>

<p>부트스트랩 아이콘:</p>
<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>
<br><br>

<p>스타일된 Bootstrap icons (size and color):</p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

부트스트랩 아이콘을 링크하여 설정하고 i class에 'glyphicon glyphicon-cloud, glyphicon-remove, glyphicon-user, glyphicon-envelope, glyphicon-thumbs-up 등의 아이콘을 화면에 표시한다. 또한 해당 부트스트랩 아이콘에 font-size, color 등의 스타일을 적용한 결과 화면은 아래 그림과 같다.

CSS bootstrap icon library 활용예시

 

google icons

 

Google 아이콘을 사용하려면 HTML 페이지의 <head> 섹션에 다음 행을 추가합니다:

<link rel="stylesheet" href=" https://fonts.googleapis.com/icon?family=Material+Icons ">

참고: 다운로드 또는 설치가 필요하지 않는다!

<!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=" https://fonts.googleapis.com/icon?family=Material+Icons ">
</head>
<body>

<h1>구글 아이콘 라이브러리</h1>

<p>구글 아이콘:</p>
<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>
<br><br>

<p>스타일된 구글 아이콘(크기와 색):</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>

</body>
</html>

구글 아이콘을 사용하기 위해 'https://fonts.googleapis.com/icon?family=Material+Icons ' 링크를 설정하였고 '<i class...'에 "material-icons"에 cloud, favorite, attachment, computer, traffic 등의 아이콘을 표시하였고, 크기와 색을 스타일한 아이콘은 아래 그림과 같이 표시하였다.

CSS google icons 라이브러리 활용 예시

 

지금까지 간략히 아이콘 활용에 대해 살펴보았다.

icon을 설정하려면 특정 아이콘 라이브러리 사이트에 링크를 설정하고 아이콘을 사용하면 된다.

이번 글에서 살펴본 아이콘은 awesome, bootstrape glyphicon, google icon 등을 살펴보았다.

각 사이트의 아이콘 활용하는 예제를 실습해보기를 추천합니다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

 

반응형
저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS link  (0) 2023.08.12
CSS font 속성  (0) 2023.08.11
CSS 어울리는 글꼴 조합  (0) 2023.08.09
CSS google fonts  (0) 2023.08.08
CSS font-size 속성  (0) 2023.08.07

관련글

댓글

티스토리툴바