폰트어썸에는 다양한 웹 아이콘들이 있습니다. 보통 유명한 플랫폼의 로고는 왠만하면 다 있습니다. 이게 안타까운 부분입니다. 국내 플랫폼인 네이버라던지 카카오톡에 대한 아이콘은 현재 폰트어썸에 등록되어있지 않습니다. 친효스킨에 사용중인 네이버, 네이버밴드, 카카오톡 아이콘들은 모두 이미지 파일입니다. 해서! 이미지 파일을 대체할 SVG 코드를 사용할 계획입니다. 이 글은 준비를 위한 첫 걸음마 글이 될 것입니다.
네이버 로고 파일
일단 네이버측에서 개발자분들을 위해 무료 ai 소스를 배포하고 있습니다. 아래가 공식 페이지입니다.
방문해 보시면 다양한 네이버 버튼들이 있음을 알 수 있으실 겁니다. 원하는 형태의 ai 파일을 다운로드 받으시면 됩니다.
다운로드 받은 ai 파일을 열어보면 이렇게 보기 좋게 아이콘들이 정렬되어 있습니다. 이중에서 저는 네모난 아이콘형 로고를 SVG로 추출할 겁니다.
오브젝트가 모두 따로 선택되기에 원하는 아이콘을 선택 후 Ctrl+C를 눌러 복사합니다. 이후에 일러스트레이터에서 새 문서를 열고 그대로 Ctrl+V를 눌러 붙여넣기만 하면 끝입니다. 아이콘 끝 부분이 기본적으로 라운드 처리가 되어있는데 어차피 이건 CSS에서 제어가 가능하니 그냥 기본 형태로 돌려놓았습니다. 이제 이 녀석을 SVG 코드로 추출해 봅니다.