|
워드프레스 Wordpress Font Awesome CSS 사용하여 인포그래픽 아이콘 삽입하기 |
|
환경: Chrome |
Font Awesome 은 아이콘을 텍스트 방식으로 만든 것을 말합니다. 웹 브라우저에서는Font Awesome 에서 제공하는 CSS 파일을 이용해서 아이콘을 적용할 수 있는데, 그림이 아니며 아이콘이 모여 있는 글꼴입니다. Font Awesome 제공하는 폰트 파일을 받아서 컴퓨터에 설치하면 각종 문서에 적용하는 것도 가능합니다. 이것은 그림이 아니기 때문에 속도가 빠를 뿐만 아니라 모든 웹 브라우저에 호환이 된다는 것이 장점입니다. 그리고 폰트 아이콘은 벡터 방식이기 때문에 확대해도 깨지지 않습니다.
▼ 이런 Font Awesome 사이트는 다음과 같습니다. 홈페이지로 접속해서 폰트를 다운받을 수도 있습니다. 다운받은 파일에는 컴퓨터에서 사용할 수 있는 ttf 뿐만 아니라 웹 브라우저에서 사용이 가능한 css 도 있습니다. 하지만 웹 페이지에서 참고할 때는 CDN 서버를 이용하는 것이 좋습니다.
http://fortawesome.github.io/Font-Awesome/
▼ 폰트를 다운 받기 전에 어떤 아이콘들이 있는지 확인해 보는 것도 좋습니다. 아래 링크 주소를 클릭하시면 현재까지 나와 있는 모든 아이콘들을 확인해 볼 수 있습니다. 그리고 제일 상단에는 최근에 추가된 아이콘 목록이 나오는데 현재에도 계속해서 나오고 있습니다.
http://fortawesome.github.io/Font-Awesome/icons/
▼ 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"> |
|
¤ 워드프레스에 세팅해서 사용하기 |
▼ 그럼 워드프레스에서 아이콘을 사용하기 위한 세팅을 해 보도록 하겠습니다. 일단 폰트를 사용하기 위한 링크를 소스에 넣어야 되므로 워드프레스 관리자로 접속한 후 왼쪽 메뉴에서 [외모] > [테마 편집기] 메뉴를 선택합니다.
▼ 테마 편집기 화면에서 선택할 파일은 header.php 입니다. 왜냐하면 header.php 파일은 웹 페이지를 구성하는 레이아웃에서 모든 웹 페이지 상단에 들어갑니다. 이 파일 안에 폰트 링크 정보를 넣어 두면 전체에 적용이 되는 것이죠.
▼ header.php 소스 보기에서 <head> 태그 안에 링크 html 소스를 넣습니다. 에디터에 링크 주소를 넣고 아래로 내려가서 [파일 업데이트] 버튼을 클릭합니다.
▼ 아이콘을 넣는 방법은 <i> 태그를 이용하며 class 명으로 icon 이름을 입력하면 됩니다. 사이트에서 알아온 아이콘 이름을 class 명으로 넣고 아래처럼 HTML 을 완성합니다. 그럼 자신이 원하는 아이콘을 화면에 표시할 수 있습니다. 그리고 앞에 붙은 fa 클래스는 공통적으로 쓰이는 스타일들을 모아 둔 것입니다. 그래서 아이콘에 해당하는 클래스와 함께 쓰입니다.
|
<i class="fa icon-windows"></i> 윈도우 아이콘 |
▼ 만약 아이콘의 크기를 늘이고 싶다면 fa-2x, fa-3x ... 클래스를 이용합니다. 아래 그림을 참고하시기 바랍니다. 이렇게 아이콘의 크기를 늘여도 깨지지 않는 이유는 벡터 방식으로 제작되었기 때문입니다.
'워드프레스' 카테고리의 다른 글
| 워드프레스(Wordpress) 관리자 화면 접속하는 방법 (0) | 2019.01.07 |
|---|---|
| 워드프레스 Wordpress 로그인 횟수 제한으로 접속 차단하는 플러그인 사용하기 (0) | 2018.12.31 |
| 워드프레스 사이트에서 제공하는 무료 호스팅 구축 방법 (0) | 2018.12.22 |
| 워드프레스 메뉴 만들기, 카테고리 만들기 (4) | 2018.12.21 |
| 워드프레스 Wordpress 네이버 웹마스터도구에 등록하는 방법 (3) | 2018.10.20 |
| 워드프레스 Wordpress 무료 호스팅을 할 수 있는 닷홈 호스팅 (0) | 2018.08.29 |
| 워드프레스 Wordpress 내보내기로 컨텐츠 백업하는 방법 (0) | 2018.08.23 |
| 워드프레스 Wordpress 가져오기 기능으로 다른 시스템 글이나 댓글 가져오기 (0) | 2018.08.15 |
