워드프레스 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 녹두장군