728x90
1. CDN을 통해 사용
별도로 설치하지 않고, HTML 파일에 CDN 링크를 추가하여 사용할 수 있습니다.
<head>
<!-- Font Awesome CDN 링크 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>이후 HTML에서 아이콘을 아래와 같이 사용할 수 있습니다:
<i class="fas fa-angle-left"></i> <!-- 왼쪽 화살표 아이콘 -->
<i class="fas fa-angle-right"></i> <!-- 오른쪽 화살표 아이콘 -->이 방법은 가장 간단하며, 별도의 파일 다운로드가 필요 없습니다.
CDN 방식은 라이브러리를 웹에서 불러오는 방식이라 빠르게 적용할 수 있지만, 인터넷 연결이 필요합니다.
2. NPM으로 설치 (로컬 프로젝트에서 사용)
로컬 프로젝트에서 Font Awesome을 사용하려면 NPM을 통해 설치할 수 있습니다.
Node.js 프로젝트에서 사용 시 편리합니다.
npm install @fortawesome/fontawesome-free설치한 후, CSS 파일을 직접 임포트하여 사용합니다.
@import "~@fortawesome/fontawesome-free/css/all.min.css";그 후 HTML에서 아이콘을 사용하면 됩니다:
<i class="fas fa-angle-left"></i>3. 다운로드하여 로컬에 설치
Font Awesome 웹사이트에서 파일을 직접 다운로드할 수도 있습니다.
다운로드한 폴더 안에 있는 css/all.min.css 파일과 webfonts 폴더를 프로젝트에 추가한 후,
HTML에 CSS 파일을 링크하면 됩니다:
<head>
<link rel="stylesheet" href="path/to/fontawesome/css/all.min.css">
</head>4. React, Vue, Angular 등에서 사용
프레임워크나 라이브러리에서 Font Awesome을 사용할 때는,
각각의 환경에 맞는 방법으로 설치 및 설정할 수 있습니다.
예를 들어, React에서는 react-fontawesome 패키지를 사용해 아이콘을 적용할 수 있습니다.
요약
- CDN 방식: 별도 설치 없이 웹에서 바로 사용 가능.
- NPM 설치: Node.js 기반 프로젝트에서 쉽게 사용.
- 로컬 설치: 직접 다운로드 후 프로젝트에 추가하여 사용.
728x90
'> IT 노트 > 활용' 카테고리의 다른 글
| [리액트] 페이지 함수 만들기 (5) | 2024.09.08 |
|---|---|
| [리액트] Font Awesome 라이브러리 사용하기 (0) | 2024.09.07 |
| [CSS] 스크롤 바 꾸미기 (0) | 2024.08.20 |
| [CSS] aisde 2개 페이지 만들기 (0) | 2024.07.30 |
| 위글위글 3등분 (0) | 2024.07.30 |
