아이콘은 사용자가 응용 프로그램에서 수행할 수 있는 작업을 설명하는 데 적합합니다. 쉽게 사용할 수 있는 여러 아이콘 라이브러리가 있습니다. 다음은 많은 것 중 몇 가지입니다.
- 글꼴 어썸 – https://fontawesome.com/
- 플래티콘 – https://www.flaticon.com/
- 머티리얼 디자인 아이콘 – https://material.io/resources/icons/
위에서 언급한 것보다 확실히 더 많지만 이 가이드의 목표는 프로젝트에 위의 라이브러리 중 하나를 활용하고 스타일을 제어하도록 대상을 지정하는 방법을 보여 주는 것입니다. 게다가, 한 라이브러리에 대한 프로세스를 배우면 다른 라이브러리에 대해서도 매우 유사합니다.
이 기사에서는 Font Awesome 아이콘 라이브러리를 사용합니다. 아래 편집기에서 <link> HTML 문서의 헤드에 있습니다. 이것은 기본적으로 Font Awesome의 아이콘 라이브러리를 참조하는 축소된 CSS 파일입니다. "축소"는 기본적으로 모든 공백이 사라졌다는 사실을 의미하므로 실제로 서식이 없습니다.
이 콘텐츠 전송 네트워크가 있는 한 – CDN – <head> , 거의 모든 Font Awesome의 무료 라이브러리에 액세스할 수 있습니다. SVG 라이브러리도 있지만 JavaScript에 대해 더 이야기할 때 이에 대해 알아보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icons</title>
<style>
.icon-container {
font-size: 24px;
}
.fab {
font-size: 3rem;
color: #1DA1F1;
}
.fa-heart {
font-size: 4rem;
color: crimson;
}
</style>
</head>
<body>
<!-- Icons will go here -->
<div class="icon-container">
<i class="fab fa-twitter"></i>
<span class="fas fa-camera"></span>
<span class="fas fa-heart"></span>
</div>
</body>
</html>
위의 편집기에서 본문에 <i>라는 두 개의 인라인 요소가 있음을 알 수 있습니다. 및 <span> 요소. 어느 쪽이든 마크업에 아이콘을 작성하는 유효한 방법입니다. 개인적으로 <i>를 보았습니다. 가장 많이 사용했지만 <span>도 보았습니다. 드문 경우에.
요소의 내용이 비어 있는 것을 볼 수 있습니다. class 속성은 HTML 파일의 헤드에 삽입한 CSS 파일을 사용하여 Font Awesome 라이브러리에서 필요한 아이콘을 가져오는 방법입니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
작업 중인 내용을 확인하기 위해 CSS 파일을 살펴보고 싶다면 확실히 할 수 있습니다. 그것은 당신에게 텍스트의 벽을 줄 것이므로 약간 압도적 일 수 있습니다. 프로젝트에 무료 아이콘을 삽입하는 데 필요한 모든 정보가 있다는 것만 알아두세요.
아이콘의 클래스 이름은 스타일 접두사와 아이콘 이름의 두 부분으로 구성됩니다. 위의 예에서 우리는 "fab"과 "fab"를 봅니다. "fa"는 font Awesome, "b"는 브랜드, "s"는 solid를 나타냅니다. 다른 접두사도 있지만 여기에는 PRO 계정이 필요합니다.
아이콘 이름은 Font Awesome 웹사이트에서 아이콘 갤러리를 탐색할 때 찾을 수 있습니다. 일반적으로 위에서 볼 수 있는 "fa-<아이콘 이름>" 규칙을 따릅니다.
아이콘은 스타일을 지정하고 CSS를 사용하여 페이지에서 위치를 제어할 때 인라인 요소처럼 취급되어야 합니다. Font Awesome의 아이콘 스타일 지정에 대한 자세한 내용은 문서를 참조하세요. 문서는 매우 간단하며 문서 읽기 연습에 도움이 됩니다. CSS를 사용한 스타일 지정의 예는 위의 편집기에 있습니다.
위의 샌드박스 환경을 자유롭게 사용하여 아이콘을 사용하고 스타일을 지정해 보세요!