[WEB]Font Awesome 라이브러리 사용하기

Font Awesome 라이브러리 사용하기

---

 

https://fontawesome.com/v5/docs/web/setup/host-font-awesome-yourself

Host Font Awesome Yourself

Font Awesome을 사용하기 위해서 라이브러리를 설치를 해주어야한다

설치를 하거나 CDN 방식/ 직접 다운 하는 방법이 있다

 

CDN 방식으로 설치하기

 

CDN방식은 해당 사이트에 있는 CSS를 불러와서 사용하는 것이기 때문에

간편하고, 다운로드속도가 빠르지만 해당 서버가 먹통이 될 경우에는 적용이 되지 않을 수 있다는 단점이 있다

 

구글에 font awesome cdnjs 라고 검색한다

 

 검색을 하면 검색창 최상단에 다음과 같은 라이브러리 사이트가 나온다

https://cdnjs.com/libraries/font-awesome

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

그리고 아래에 보면 all.min.css 라고 있는데 이것을 복사를 해준다

복사를 했으면 이제 Font Awesome을 사용할 HTML의 Head안에 복사한 코드를 붙여 넣어주면 된다

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

다음과 같이 넣어주면 해당 사이트에서 CSS 파일을 불러와서 적용이 가능하다

 

CDN의 단점을 보완하기 위해서 

직접 다운을 하는 방법도 있다

 

직접 다운을 하기

 

https://fontawesome.com/

Font Awesome

Font Awesome 공식으로 들어가서 다운로드를 해주면된다.

다운을 받아서 CSS, Webfonts 두개의 폴더를 작업폴더에 넣어주고

CDN과 마찬가지로 all.min.css파일을 html에 넣어주어야하는데

<link href="all.min.css 파일 경로" rel="stylesheet"> 를 Head 태그에 넣어주면된다.

all.min 파일 빼고는 다 지워도 상관없다

 

이렇게 하면 Font Awesome을 사용할 수 있다

 

 

Font Awesome 아이콘 적용하기

 

 

 

이제 Font Awesome 에서 원하는 아이콘을 골라서

html주소를 가져오면 된다

pro는 유료 버전이닌까 무료인 버전을 가져와서 사용할 것이다.

아이콘을 선택하면 다음과 같은 창이 뜨는데

아래에 HTML 태그를 클릭하면 자동으로 복사가된다.

사이즈가 너무 작다고 생각이 들면 Default Size에서 원하는 이미지 사이즈를 선택해서 

HTML 태그를 복사해주면 된다

그리고 원하는 위치에 태그를 넣어주면 적용이 된다