Font Awesome 웹 아이콘 사용법

CSS 24.02.07

1. FontAwesome 라이브러리 추가 

첫 번째로, FontAwesome CSS 파일을 웹 페이지에 추가해야 합니다. 이를 위해서는 다음과 같은 태그를 섹션에 추가합니다. 여기서는 CDN을 사용합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FontAwesome 사용 예제</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha384-eVWmY1Vz02L/uIBq0e4F5rj2Xg3TUZ3I7sAxvnN4+7xj2pkF5+pw0PPxWtrGvFnZ" crossorigin="anonymous">
</head>
<body>
    <!-- 페이지 내용은 여기에 추가 -->
 
</body>
</html>
Colored by Color Scripter
cs

2. 아이콘 추가
이제 페이지 내에서 FontAwesome 아이콘을 추가할 수 있습니다. <i> 태그를 사용하고, 클래스 속성에 fas 및 fa-아이콘-이름을 지정합니다.


1
2
3
4
5
6
7
8
<!-- 홈 아이콘 -->
<i class="fas fa-home"></i>
 
<!-- 이메일 아이콘 -->
<i class="fas fa-envelope"></i>
 
<!-- 검색 아이콘 -->
<i class="fas fa-search"></i>
cs


3. 추가적인 스타일링
아이콘의 크기나 색상 등을 변경하려면 CSS를 사용할 수 있습니다. 아래는 예시입니다.

 

<style>
    /* 아이콘 크기 조절 */
    .icon-large {
        font-size: 2em;
    }
    /* 아이콘 색상 변경 */
    .icon-red {
        color: red;
    }
</style>
 
<!-- 큰 홈 아이콘 -->
<i class="fas fa-home icon-large"></i>
 
<!-- 빨간색 이메일 아이콘 -->
<i class="fas fa-envelope icon-red"></i>

위의 코드에서는 .icon-large 클래스를 사용하여 큰 홈 아이콘을 만들고, .icon-red 클래스를 사용하여 빨간색 이메일 아이콘을 만들었습니다.

이런 식으로 클래스를 추가하여 원하는 스타일을 적용할 수 있습니다.

예제

See the Pen font awesome by designkits (@designkits) on CodePen.

목록으로

최근 포스트

Design Kits Blog