제 스킨 헤더처럼 특정 영역에만 간단하게 폰트를 삽입하는 건 2가지 방법이 있습니다.
1. 그냥 폰트를 두 개 삽입해놓는다.
두 가지 폰트를 다양하게 쓸 일이 있다면 이 방식이 강제되겠지만, 특정 영역에만 쓸 때는 가부터 핳까지 모조리 들어간 폰트를 굳이 사용해 페이지를 로드할 때 불러와야 할 용량만 커지도록 할 필요가 없습니다.
2. svg 파일을 이용한다.
svg가 무엇인진 이 곳을 참조하시면 설명이 되어 있습니다.
움직이는 svg 이미지는 일부 브라우저에서 멈춘 이미지로 표시되긴 합니다만, 이건 지금 같은 경우엔 크게 신경 쓸 필요가 없어 보이네요.
저는 Adobe Illustrator를 이용해 작업했습니다.
문자 도구를 이용하여 글자를 작성한 후에 원하는 폰트로 변경합니다.
Ctrl + Shift + O 혹은 문자 > 윤곽선 만들기를 이용하시면 이렇게 윤곽선을 알아서 잡아줍니다.
우클릭 > 내보내기 위해 모으기 > 단일 자산을 클릭하시면 이런 창에서 svg 파일로 해당 문구를 출력할 수 있습니다.
이렇게 나온 파일의 소스를 복사하시거나, 이미지 형식으로 로드해서 사용하셔도 문제는 없지만, 조금 더 자유로운 활용을 위해 전 아이콘 폰트에 해당 svg 파일을 삽입했습니다.
icomoon에서 아이콘 폰트 제작이 가능합니다.
이렇게 넣은 폰트랑 fontawesome 등에서 아이콘 선택해서 폰트 완성하면 그 이후는 fontawesome과 사용법이 크게 다르지 않습니다.
여기에 나온 것처럼 애니메이션을 이용하려면 svg를 그대로 삽입한 뒤에 css나 js를 이용하여 애니메이션을 넣으면 됩니다.
