HTML 아이콘 추가 - Font Awesome

COCO_develop 2024. 11. 5. 16:14

Font Awesome

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

fontawesome.com

Font Awesome 라이브러리 추가 : <head>에 링크 추가

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

크기 조절 : 1~10x

<i class="fa-solid fa-camera fa-1x"></i>

상대적 크기 조절: 2xs, xs, sm, lg, xl, 2xl

<p><i class="fa-solid fa-coffee fa-2xs"></i> text </p>

아이콘을 버튼으로 사용하기

1) 아이콘 + 배경

<button class="btn btn-primary">
  <i class="fas fa-home"></i>
</button>

버튼에 class="btn btn-primary" 추가: primary는 배경 색

2) 배경색 없애기

<style>
	.btn-custom {
      background-color: transparent; /* 배경색 제거 */
      border-color: #c5e1fc;         /* 테두리 색상 */
      color: #0059b8;                /* 텍스트 및 아이콘 색상 */
    }
</style>

<button class="btn btn-custom">버튼</button>

style 추가 -> 버튼 class 추가

3) 배경 없이 아이콘만

<button class="btn btn-outline-secondary">
  <i class="fas fa-trash"></i>
</button>

버튼에 class="btn btn-outline-secondary" 추가

아이콘에 링크 걸기

<a href="" class="fa-solid fa-trash"></a>

// 홈
<i class="fa-solid fa-house"></i>

// 직원
<i class="fa-solid fa-id-card-clip"></i>

// 영화
<i class="fa-solid fa-film"></i>
<i class="fa-solid fa-clapperboard"></i>

// 가게
<i class="fa-solid fa-shop"></i>

// 삭제
<i class="fa-solid fa-trash"></i>
<i class="fa-solid fa-trash-can"></i>

// 업로드
<i class="fa-solid fa-upload"></i>

// 이미지
<i class="fa-regular fa-image"></i>

// 사람
<i class="fa-regular fa-user"></i>
// 사람+색
<i class="fa-solid fa-user"></i>

// 멤버 수정
<i class="fa-regular fa-user-pen"></i>

// 멤버 삭제
<i class="fa-solid fa-user-xmark"></i>

// X 표
<i class="fa-solid fa-xmark"></i>