워드프레스 Fontello 아이콘 추가 :: 마이구미

이번 글은 웹 폰트 이라는 주제이다.

사실 Font Awesome, Entypo, Fontello 등등 많다.

일단 대중화되어 알고 있는 Font Awesome 용어로 통일화하겠다.

들어본 적이 있는가?

일단 확률이 높지 않은 예이지만 한번 들어보겠다.

혹시 사이트 이미지가 궁금해 소스를 깠는데 까도까도 이미지 경로가 보이지 않은 적이 있는가?

혹시 위와 같은 경우를 겪은 적이 있는가?

이미지의 css가 content: '\e893' 이라고 설정되어있다.

이것을 없애면 이미지가 없어질 것이다.

궁금하다면 아래의 링크를 통해 한번 해보아라.

http://erunspace.com/

Font Awesome이란 무엇인지 한번 살펴보자.

간단히 Font Awesome의 정의는 아래와 같다.

Font Awesome 아이콘 전용 폰트 파일을 이용하여 아이콘을 출력하는 방식이다.

그렇다면 다음으로 알아야할 것은 역시 왜? Why? 사용하는 것인가?

1. 이미지가 깨지지 않는다.

2. 작업이 쉽다.

3. 빠르다.

크게 세가지를 들었다.

하나하나 다루기전에 하나 더 살펴보자.

반대로 기존의 이미지의 단점은 무엇인가?

1. 공수가 많이 든다.

2. 이미지가 깨질 수 있다.

3. 웹 페이지의 성능에 영향을 끼친다.

Font Awesome은 정의한대로 폰트 파일을 이용하여 아이콘을 출력한다.

폰트라고 생각하면 쉽게 이해할 수 있다.

그렇기에 이미지와 달리 깨질 위험이 없다.

또한 필요한 이미지가 있을 경우 포토샵 같은 툴을 이용하여 편집 작업을 할 필요가 없다.

또한 이미지와 같이 용량 걱정 할 필요가 없기에 빠르다.

Font Awesome은 현재 대중화되어 이용되는 곳은 부트스트랩이나 워드프레스에서 많이 볼 수 있다.

왜 부트스트랩과 워드프레스에서 많이 사용되고 있을까?

부트스트랩과 워드프레스와 같은 대중화된 서비스는 무엇이 장점일까?

그건 바로 브라우저들의 호환성이다.

Font Awesome도 모든 브라우저에서 호환된다.

Font Awesome을 사용하고 싶으면 하면된다. (정말 쉽다)

초보자들도 쉽게 이용할 수 있다.

그냥 cdn 주소를 박고 html만 넣어주면 아이콘이 생성된다.

이건 뭐 설명하지 않겠다. 아래 링크를 통해 예제만 보아도 쉽게 적용할 수 있다.

http://fontawesome.io/

Font Awesome에 대해서는 여기까지하고 진짜 주제를 다뤄보자.

이번 글은 워드프레스의 econature 테마를 가지고 진행한다. (유료 테마라...ㅈㅅ)

이 테마는 Fontello가 적용되어있다.

( Fontello는 생활코딩에서도 강의로 다뤄졌다. https://opentutorials.org/course/2418/13511 )

워드프레스의 테마에는 거의 웹 폰트가 적용되어있다.

하지만 이미 셋팅되어 있기 때문에 때론 원하는 이미지가 없을 수 있다.

본인이 그랬다. 그래서 추가하고 싶었다.

fonttello.css 파일은 아래와 같다.

url 속성에 있는 각종 폰트 파일들을 볼 수 있다.

현재 위 소스에는 eot, woff, ttf, svg가 있다.

사실상 4개의 파일이 나타내는 데이터들은 동일하다.

확장자만 다른 것이다.  그 이유는 폰트 파일 또한 브라우저를 가리기 때문...

브라우저들의 호환을 위한 작업이다.

그렇기에 추가 및 삭제와 같은 수정 작업이 있을 경우에는 4개의 파일 전부를 수정해야한다.

본인의 경우 svg만 수정해놓고 안된다고 탓을 하며 계속 삽질만 했다.

수정 방법의 순서를 알려주겠다.

1. https://icomoon.io or http://fontello.com/  접속하여 본인의 svg 파일을 import 시켜 아이콘 추가 및 삭제와 같은 원하는 작업을 한다.

2. 작업이 끝났다면 svg를 다운로드한다.

3. 다운로드한 svg 파일을 https://onlinefontconverter.com/ 접속하여 svg 파일을 이용해 필요한 각 폰트 파일(eot, woff, ttf)을 만든다.

4. 서버에 있는 폰트파일들을 덮어씌운다.

이러한 작업들을 통해 필요없는 아이콘은 삭제해버린다면 훨씬 효율적이다.

기존의 이미지 방식보다 가벼워 빠르지만 사용하지도 않는 아이콘들이 많다면 당연히 비효율적이니 말이다.

svg woff, eot, ttf 변환 사이트

https://onlinefontconverter.com/

Font Awesome 커스텀 질문

http://stackoverflow.com/questions/11426172/add-custom-icons-to-font-awesome

아이콘 추가 및 커스텀 사이트

https://icomoon.io

Fontello

http://fontello.com/

https://opentutorials.org/course/2418/13511