웹에서 Font Awsome 을 이용하여 특수문자 사용하기

Font Awsome 은 웹 페이지 개발시 이미지가 아닌 테그를 이용하여 아래와 같은 특수 문자를 쓸수 있도록 해줍니다.

등

 사용전 알아두셔야할 것은 3.2.1 까지는 IE 8.x 등의 하위 버전을 지원하지만 4.3.0 과 같이 4.x 이상 버전에서는 저버전의 브라우저들을 지원하지 않으니 참고하시기 바랍니다.

CDN 을 이용한 간단한 사용방법은 아래와 같이 버전별 URL 을 Head 사이에 넣으셔서 로드해주시고 

Font Awsome 3.2.1

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Font Awsome 4.3.0

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

아래와 같이 페이지의 문자표 테그를 참고하셔서 HTML  코드에 직접 사용하시면 됩니다.

Font Awsome 3.2.1 아이콘 리스트

http://fortawesome.github.io/Font-Awesome/3.2.1/icons/

Font Awsome 4.3.0 아이콘 리스트

http://fortawesome.github.io/Font-Awesome/icons/

위의 아이콘 리스트에서 원하는 아이콘을 클릭하시면 아래와 같은 아이콘 테그를 확인하실수 있습니다.

이제 위의 테그를 원하는 곳에 삽입하여 주시면 됩니다.

 또 다른 사용방법으로는 파일을 다운로드 받아 CDN 을 이용하지 않고 사용하는 방법인대요. 이 경우 참고 하실점은 Font 를 서버에 올리시고 CSS 의 경로를 수정해주셔야 합니다. 혹은 지정되있는 폴더에 올려 주시면 됩니다.

 아래와 같이 css 의 최상단 부분에 font 혹은 font 폴더를 지정 하는 부분이 각 버전별로 존재 합니다. 이 경로에 맞게 font 를 업로드 해주시거나 수정해주시면 업로드한 Font Awsome의 폰트를 이용하여 사용하실수 있습니다.