Font Awesome 적용 방법

[HTML] FontAwesome 적용 시키기

Feb 21, 2024

Contents

Library 설치

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library files on your websites.

https://cdnjs.com/libraries/font-awesome

위 사이트에서 코드 복사하기

코드를 아래와 같이 입력 하여 적용


 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>


<!DOCTYPE html>
<html>

<head>
    <title>Font Awesome Icons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>

<body>
    <i class="fas fa-heart"></i>
    <i class="far fa-heart"></i>
    <i class="fa fa-heart"></i>
</body>

</html>

Icon 찾는 법

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

https://fontawesome.com/

HTML

Font Awesome 적용 방법

[HTML] FontAwesome 적용 시키기

Feb 21, 2024

Contents

Library 설치 Icon 찾는 법

Library 설치

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

https://cdnjs.com/libraries/font-awesome

위 사이트에서 코드 복사하기

코드를 아래와 같이 입력 하여 적용


 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>


<!DOCTYPE html>
<html>

<head>
    <title>Font Awesome Icons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>

<body>
    <i class="fas fa-heart"></i>
    <i class="far fa-heart"></i>
    <i class="fa fa-heart"></i>
</body>

</html>

Icon 찾는 법

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

https://fontawesome.com/