Jam's story

[CSS] 아이콘 본문

WEB/CSS

[CSS] 아이콘

애플쩀 2022. 5. 20. 16:29

style에서 color을 지정할 수 있다.

i 태그 사용 

 

1.가장 간단한 방법 ? 아이콘 라이브러리 사용 

fontawesome.com 

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

</head>
<body>
<pre>
가장 간단한 방법? 아이콘 라이브러리 
fontawesome.com 
<i class="fas fa-clolud"></i>
<i class="fas fa-heart" style="font-size:36px ;color: red"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

 

 

2.구글 아이콘 

 

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<p>Google</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>

 

 

 

3.부트스트랩

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- 부트스트랩 아이콘-->
<p>Bootstrap</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>

<span class="glyphicon glyphicon-cloud"></span>
<span class="glyphicon glyphicon-remove"></span>
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-thumbs-up"></span>

</body>

 

 

저작자표시

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

[CSS] 페이징 처리  (0) 2022.05.23
[CSS] div와 a로 메뉴 만들기+ hover  (0) 2022.05.23
[CSS] 구글 글꼴 사용  (0) 2022.05.20
[CSS] font  (0) 2022.05.20
[CSS] text-shadow  (0) 2022.05.20
'WEB/CSS' Related Articles more
Comments