FontAwesome CSS Pseudo-elements

FontAwesome CSS Pseudo-elements

::before 와 같은 pseudo-element를 활용해 FontAwesome 아이콘을 페이지에 추가할 수 있다.

 

CSS Pseudo-elements를 사용하여 아이콘을 정의하는 방법

1. 가상요소 ::before  ::after  둘 중 하나를 사용한다.
2. 아래 표를 참고하여 font-family 값을 설정한다.
3. 아래 표를 참고하여 font-weight 값을 설정한다.

Style	Availability	@font-face weight	@font-face font-family
Solid	Free Plan	900	Font Awesome 5 Free or Font Awesome 5 Pro (for pro users)
Regular	Pro Plan Required	400	Font Awesome 5 Pro
Light	Pro Plan Required	300	Font Awesome 5 Pro
Duotone	Pro Plan Required	900	Font Awesome 5 Duotone
Brands	Free Plan	400	Font Awesome 5 Brands
Uploaded Icons	Pro Plan Required	400	Font Awesome Kit

/* Step 1: Common Properties: All required to make icons render reliably */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Step 2: Reference Individual Icons */
.login::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

/* Note: Make sure to include the correct weight and Unicode value for the icon */
.tps::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f1ea";
}

 

출처 : https://fontawesome.com/v5.15/how-to-use/on-the-web/advanced/css-pseudo-elements

Font Awesome