html에서 icon 추가하는 방법 & BEM

html에서 icon을 추가하는 방법 두 가지가 있다.

 

1. 직접 이미지를 추가하여 크기 조절하기

2. SVG(Scalable Vector Graphics) 이용하기

 

예시로 첨부한 아래 두 사이트에서 코드를 복사해서 자신의 html 파일에 붙여넣으면 된다.

(무료, 대신 소스가 적다)

https://heroicons.com/

Heroicons

(무료 & 유료, 가입 필요하다)

https://fontawesome.com/

Font Awesome

 

* html 파일에서 body 안의 제일 아래에 <script></script> 추가해야 한다.

 

그리고 아래와 같이 클래스를 추가하여 아이콘의 크기를 조절할 수 있다.

// fa-lg(large), fa-2x, fa-5x 등등
<li class="nav__btn"><a class="nav__link" href="#"><i class="fa-regular fa-comment fa-2x"></i></a></li>

---

BEM(Block Element Modifier)

참고: https://getbem.com/introduction/

BEM — Introduction

 

css를 작성하다 보면 수많은 id와 class를 설정하다 보면, 해당 코드가 어디에 적용되는지 또 어디에 사용되어야 할지 헷갈리기도 한다. 그래서 아래 코드와 같이 인간이 이해하기 쉽게 작성하면 좋다.

// btn, btn--orange, btn--big class
<a href="https://css-tricks.com" class="btn btn--orange btn--big">
  // btn 안의 price
  <span class="btn__price">$3</span>
  // btn 안의 text
  <span class="btn__text">Big button</span>
</a>

출처 및 예시: https://css-tricks.com/bem-101/