Bootstrap을 위한 Font Awesome 날씨 아이콘
부트스트랩을 사용하다보니 i tag를 이용한 font awesome을 이용하면 폰트 스타일의 아이콘들을 사용할수 있어서 무척이나 편리했다. 이 아이콘들의 장점은 사이즈를 확대하거나 줄이거나 하여도 트루타입 폰트를 이용한 아이콘을 사용하게 때문에 외각선에 계단현상이 생기거나 하는 것을 막아주고 자연스러운 이미지 같은 아이콘들을 사용할수 있다는 장점이 있다. 색상 또한 자유롭게 적용이 가능하다. 게다가 준비된 300가지 이상의 아이콘 세트를 cheatsheet를 통해서 간단하게 입력해서 사용할수 있다. CDN 같은 공용으로 사용가능한 라이브러리 링크 주소도 제공하기 때문에 자신의 서버에 꼭 설치를 하지 않아도 되는 장점들도 가지고 있다.
꼭 부트스트랩이 아니더라도 인터넷을 찾아보면 사용하기 편리한 공개 Font awesome들이 꽤나 많다. 그중에 오늘 이야기 드릴 것은 날씨를 위한 Font awesome 이다.
http://erikflowers.github.io/weather-icons/
기상청 홈페이지에서 RSS를 이용해서 사무실 인트라넷에 사용할 날씨 정보를 보여주는데 단순히 텍스트로만 보여주려니 시각성이 떨어졌다. 그때 생각난 것이 Font awesome 였고, 구글링을 통해 얻은것이 바로 이녀석이다. 무엇보다 다른 tag 를 이용하지 않아도 되고, 부트스트랩에서 확장하여 사용할수 있게 만들어 진것이 가장 큰 장점이었다.
단점이라면 너무 많은 종류의 날씨가 있다는 것일까 ? 폰트 자체도 깔끔한 편인데 작은크기로 표현하면 변별력이 떨어지는 것 같은 단점도 있었다. 하지만, 기존에 만들어진 부트스트랩과의 호환성이 좋다는 점이 가장 큰 매력으로 다가왔다.
사용법은 아주 간단해서 GitHub사이트에서 다운받은후에 자신의 사이트에 올려놓고 header 부분에 css만 연결해주면 된다. 될수 있으면 부트스트랩 css 보다 아랫쪽으로 명시하도록 하자.
CheatSheet는 http://erikflowers.github.io/weather-icons/cheatsheet/ 이곳에서 참고하시면 된다.
코드내 사용법 :