워드프레스 Wordpress Font Awesome CSS 사용하여 인포그래픽 아이콘 삽입하기

 

환경: Internet Explorer 11

 

Font Awesome 은 아이콘을 텍스트 방식으로 만든 것을 말합니다. 웹 브라우저에서는Font Awesome 에서 제공하는 CSS 파일을 이용해서 아이콘을 적용할 있는데 그림이 아니며 아이콘이 모여 있는 글꼴이라고 생각하시면 됩니다. 이 폰트 파일을 받으면 컴퓨터에 설치해 두고 각종 문서에 적용하는 것도 가능합니다. 이것은 그림이 아니기 때문에 속도가 빠를 뿐만 아니라 모든 웹 브라우저에 호환이 된다는 것이 장점이죠. 그리고 폰트 아이콘은 벡터 방식이기 때문에 확대해도 깨지지 않습니다.

 

이런 Font Awesome 사이트는 다음과 같습니다. 홈페이지로 접속해서 폰트를 다운받을 수도 있습니다. 다운받은 파일에는 컴퓨터에서 사용할 수 있는 ttf 뿐만 아니라 웹 브라우저에서 사용이 가능한 css 도 있습니다. 하지만 웹 페이지에서 참고할 때는 CDN 서버를 이용하는 것이 좋습니다.

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

 

워드프레스 Wordpress Font Awesome CSS 사용하여 인포그래픽 아이콘 삽입하기

 

폰트를 다운 받기 전에 어떤 아이콘들이 있는지 확인해 보는 것도 좋습니다. 아래 링크 주소를 클릭하시면 현재까지 나와 있는 모든 아이콘들을 확인해 볼 수 있습니다. 그리고 제일 상단에는 최근에 추가된 아이콘 목록이 나오는데 현재에도 계속해서 나오고 있습니다.

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

워드프레스 Wordpress Font Awesome CSS 사용하여 인포그래픽 아이콘 삽입하기

 

CDN 서버를 이용하지 않고 웹 서버가 있는 로컬에 다운로드한 파일을 사용하려면 워드프레스의 <head> 태그안에 아래 링크 주소를 넣어야 합니다. 주소는 파일이 올라간 서버 주소로 합니다.

 

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

 

만약 파일을 다운로드 하지 않고 CDN 서버 주소를 이용하시려면 아래 소스를 <head> 태그 안에 넣으세요. 다운로드 없이 어디에서나 이용할 수 있으며 서버에 부하를 줄일 수 있습니다.

 

<link rel="stylesheet"

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

 

¤ 워드프레스에 세팅해서 사용하기

 

그럼 워드프레스에서 아이콘을 사용하기 위한 세팅을 해 보도록 하겠습니다. 일단 폰트를 사용하기 위한 링크를 소스에 넣어야 되므로 워드프레스 관리자로 접속한 후 왼쪽 메뉴에서 [외모] > [테마 편집기] 메뉴를 선택합니다.

워드프레스 Wordpress Font Awesome CSS 사용하여 인포그래픽 아이콘 삽입하기

 

테마 편집기 화면에서 선택할 파일은 header.php 입니다. 왜냐하면 header.php 파일은 웹 페이지를 구성하는 레이아웃에서 모든 웹 페이지 상단에 들어갑니다. 이 파일 안에 폰트 링크 정보를 넣어 두면 전체에 적용이 되는 것이죠.

워드프레스 Wordpress Font Awesome CSS 사용하여 인포그래픽 아이콘 삽입하기

 

header.php 소스 보기에서 <head> 태그 안에 링크 html 소스를 넣습니다. 에디터에 링크 주소를 넣고 아래로 내려가서 [파일 업데이트] 버튼을 클릭합니다.

워드프레스 Wordpress Font Awesome CSS 사용하여 인포그래픽 아이콘 삽입하기

 

아이콘을 넣는 방법은 <i> 태그를 이용하며 class 명으로 icon 이름을 입력하면 됩니다. 사이트에서 알아온 아이콘 이름을 class 명으로 넣고 아래처럼 HTML 을 완성합니다. 그럼 자신이 원하는 아이콘을 화면에 표시할 수 있습니다. 그리고 앞에 붙은 fa 클래스는 공통적으로 쓰이는 스타일들을 모아 둔 것입니다. 그래서 아이콘에 해당하는 클래스와 함께 쓰입니다.

 

<i class="fa icon-windows"></i> 윈도우 아이콘

워드프레스 Wordpress Font Awesome CSS 사용하여 인포그래픽 아이콘 삽입하기

 

만약 아이콘의 크기를 늘이고 싶다면 fa-2x, fa-3x ... 클래스를 이용합니다. 아래 그림을 참고하시기 바랍니다. 이렇게 아이콘의 크기를 늘여도 깨지지 않는 이유는 벡터 방식으로 제작되었기 때문입니다.  

워드프레스 Wordpress Font Awesome CSS 사용하여 인포그래픽 아이콘 삽입하기

 

Posted by 녹두장군