Developer/HTML_CSS

폰트 기반의 아이콘 사이트 , 폰트 어썸.

단님 2024. 4. 15. 22:08
728x90

많은 이미지와 영상등을 사용하다 보면 , 용량이 부담스러울 수 있다.

이를 기반하여 폰트 기반의 아이콘을 제공하는 사이트를 소개한다.

사용 방법을 자세히 알아보겠다.

https://fontawesome.com/

 

가입후 로그인을 하자 ,이후  my kit 를 누르면 이와 같은 화면이 뜬다. 눌러보자.

코드가 하나 뜰텐데, 이를 복사하여 head 내의 style 태그 바로 위에 붙여넣기를 하자.

style 태그 위에 복사 붙여넣기 한 모습.
마음에 드는 아이콘을 검색하고 눌러서, 복사를 하자.
완성된 모습.

사용할 태그 선택자 내에

content : "복사붙여넣기";

font:var(--fa-font-solid);

를 추가한다면 완성된다.

 

폰트를 기반으로 하였기 때문에 , 사이즈 조절은 font-size를 이용하면 된다.