FastBoot스킨 fa-icon이 안보일때 해결방법은?

티스토리에 FastBoot스킨을 적용하고 사용을 하던 어느날 사이드바 모듈에 성격에 맞지 않는 아이콘이 적용되어 있는걸 바꾸고 싶다는 생각을 하게 되었습니다. 보여지고 있는 모듈에 적용된 아이콘은 각각 성격에 맞는 아이콘을 적용해야 보기에도 좋고, 사용하는 사람들도 아이콘만 보고도 무슨 모듈인지 알 수가 있는데요. 다른 아이콘을 적용해 놓았다면 차라리 적용을 안한것 보다는 못하지 않을까요?


저는 이 포스팅을 작성하기 전까지 티스토리에서 기본적으로 사용이 가능한 기능인줄 알았는데 그게 아니더군요.



성격에 맞지 않는 모듈 아이콘 변경

제 블로그 사이드바에 여러개의 모듈이 보여지고 있는데 그중에 모듈 내용과는 전혀 다른 아이콘이 적용되어 있는 모듈이 있습니다.

바로 구글 번역기 모듈 인데요. 번역기와는 전혀 다른 성격의 카드 아이콘이 적용되어 있습니다. 예전에 잠깐 맞지 않는 아이콘이라는 생각은 했었지만 변경을 하려는 시도는 해보지 않았는데 이번에 변경을 해보겠습니다.

fa-icon을 찾아보려 구글에 fa fa translator로 검색을 하고 처음에 보이는 사이트를 클릭해 보았습니다.

딱 제가 원하는 아이콘이 바로 보여지네요. fa-language 코드가 번역기에 맞는 아이콘이죠. 아래에 아이콘 코드가 작성되어 있어서 쉽게 변경이 가능하게 되어 있습니다.

티스토리 관리에서 HTML/CSS편집으로 이동해 구글 번역기 모듈에 복사한 아이콘 코드로 변경을 해주고 저장을 하였습니다.

아이콘이 잘 적용이 되었는가 확인을 해보니 아이콘이 보이지 않고 있네요. 차라리 아이콘이 보이지 않는게 성격이 다른 아이콘이 보이는것 보다는 낫다는 생각을 생각도 해보았지만 해결법은 있습니다.




해결은 Font Awesome !!

왜 아이콘이 보이지 않는지 알아보다가 fa-icon은 티스토리에서 기본적으로 사용이 가능한 시스템이 아니라는걸 알게 되었습니다. FastBoot스킨을 제작해 주신 Readiz님이 스킨에 적용을 하셔서 사용이 가능했던 것인데요. 제작을 하실때에 적용했던 버전이 fa-language 아이콘이 추가되기 전 버전이라서 보이지 않았던게 이유였습니다. 그렇다면 최신버전으로 업데이트를 해줘야겠죠?

티스토리 관리에서 HTML/CSS편집을 클릭해 HTML에서 검색으로 stylesheet을 입력하고 엔터를 눌러주세요.

스크롤을 조금 내려보니 Readiz님이 적용하신 코드를 찾을 수 있었습니다. 적용된 버전이 4.0.3버전이네요. 그렇다면 최신버전은 몇인지 확인을 하고 변경을 해야겠죠?

구글에서 font awesome을 검색하고 첫번째 사이트를 클릭해 주세요.

사이트에서 제일 아래로 이동해보면 위에 이미지처럼 Font Awesome 최신버전이 작성되어 있는걸 확인 하실 수 있습니다. 작성하고 있는 오늘에는 최신버전이 4.7.0이네요.

다시 티스토리 관리에 HTML/CSS편집으로 이동해 4.0.3이었던 버전을 4.7.0버전으로 변경을 해주고 저장을 하였습니다.

사이드바에 번역기 아이콘을 확인하니 제가 입력한 코드대로 아이콘이 잘 보여지게 되었습니다. Font Awesome 버전을 계속 최신버전으로 변경을 해줄 필요는 없지만 사이드바에 새로운 모듈을 추가하고 아이콘을 적용 했는데 보이지 않는다거나, 포스팅을 작성하면서 fa-icon을 입력했는데 보이지 않는다면 그때 한번쯤 최신버전으로 변경을 해주시면 아이콘이 보이게 되니 그럴때 한번 변경을 해주시면 되겠습니다.


이 글을 공유하기

댓글(0)

Designed by JB FACTORY