차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_icons [2021/03/09 08:06]
emblim98 만듦
+++ wiki:css:css_note:css_icons [2023/01/13 18:44] (현재)
@@ 줄 13: / 줄 13: @@
 \\
 \\
-======CSS Font Property======
+======CSS Icons======
-코드를 줄이기 위해, 하나의 속성에서 모든 개별 폰트 속성을 지정하는 것도 가능합니다.\\
+아이콘 라이브러리를 사용하여 아이콘을 쉽게 HTML페이지에 추가할 수 있습니다.\\
 \\
+=====아이콘 삽입 방법=====
+HTML 페이지에 아이콘을 추가하는 가장 단순한 방법은 Font Awesome과 같은 아이콘 라이브러리를 사용하는 것입니다.\\
+<i> 또는 <span>과 같은 인라인 HTML 요소에 지정한 아이콘의 이름을 추가합니다.\\
+하기 아이콘 라이브러리의 모든 아이콘들은 CSS ( 사이즈, 컬러, 쉐도우 등)로 커스터마이징할 수 있는 확대/축소할 수 있는 벡터(scalable vectors)입니다.\\
+\\
+=====Font Awesome Icons=====
+Font Awesome 아이콘을 사용하기 위해, [[https://fontawesome.com/|Font Awesome]]에서 회원가입을 하고 HTML 페이지의 <head>섹션에 추가하기 위한 코드를 받습니다.\\
+''<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>''\\
+**Note: 다운로드나 설치가 필요없습니다.**\\
+\\
+====예제====
+<code html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Font Awesome Icons</title>
+    <script src="https://kit.fontawesome.com/fontawesome가입 kit's code.js" crossorigin="anonymous"></script>
+</head>
+<body>
+    <p>Some 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>Styled 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>
+</code>
+\\
+\\
+=====Bootstrap Icons=====
+Bootstrap glyphicons(글리프아이콘즈)를 사용하기 위해, 아래의 라인을 HTML 페이지의 <head>섹션 내부에 추가합니다.\\
+''<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">''\\
+**Note: 다운로드나 설치가 필요없습니다.**\\
+\\
+====예제====
+<code html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bootstrap Icons</title>
+    <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>
+</code>
+\\
+\\
+=====Google Icons=====
+Google 아이콘을 사용하기 위해, 아래의 라인을 HTML 페이지의 <head>섹션 내부에 추가합니다.\\
+''<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">''\\
+**Note: 다운로드나 설치가 필요없습니다.**\\
+\\
+====예제====
+<code html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Google Icons</title>
+    <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>
+</code>
 {{tag>오션, CSS icons }}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구