Main menu

Font Awesome 강좌 | 시작하기

Font Awesome을 사용하는 방법은 크게 두 가지가 있습니다.

  • CDN을 이용하기
  • 다운로드 받아 사용하기

두 방법 중 CDN을 이용하는 게 훨씬 쉽습니다.

다운로드 받아 사용하면 CDN 서버 장애에 대해서 걱정할 필요가 없지만, 트래픽이 소모된다는 단점이 있습니다.

CDN 이용하기

CDN을 이용하려면 HTML 문서의 <head></head> 사이에 다음의 코드만 추가하면 됩니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

4.4.0은 Font Awesome 버전으로, 숫자만 변경해서 최신 버전을 사용할 수 있습니다.

만약 CSS 파일만 수정할 수 있다면, CSS 파일 제일 위에 다음의 코드를 추가해도 됩니다.

@import url( "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" );

다운로드 받아 사용하기

Font Awesome을 다운로드 받고 압축을 풀면 여러 폴더와 파일이 있습니다.

그 중에서 서버에 업로드해야 하는 파일은 css 폴더 안의 font-awesome.min.css 파일과 fonts 폴더에 안에 있는 모든 파일입니다.

폴더 구조를 유지한 채 업로드한다면 그대로 사용하면 되고, 폴더 구조를 다르게 해서 업로드해야 한다면 font-awesome.min.css 파일을 열고 @font-face에 있는 font 파일까지의 경로를 수정해줘야 합니다.

업로드 한 후 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 추가합니다. (경로는 적절히 수정합니다.)

<link rel="stylesheet" href="path/css/font-awesome.min.css">

이 글을 공유하기

Kakao