[마크다운으로 블로그 글 예쁘고 편하게 쓰는 법] Font Awesome 아이콘 사용하기

반응형


[마크다운으로 블로그 글 예쁘고 편하게 쓰는 법]
Font Awesome 아이콘 사용하기



Skeleton 반응형 스킨을 티스토리에 설치하게 되면 여러가지 CSS를 포함하고 있어서 다양한 방법으로 활용할 수 있습니다. 부트스트랩의 디자인을 사용할 수 있는 것 뿐만 아니라 font awesome의 아이콘 역시 자유자재로 사용할 수 있습니다. 이 아이콘은 블로그 본문내용에 포함해서 글쓰기 용도로 쓰거나 [ ]할 수 있을 뿐만 아니라, 아래처럼 특정 디자인의 요소로 활용할 때, 제목 그대로 블로그 글을 예쁘고 편하게 쓸 수있게 됩니다. ▼

icon

제일 앞에 위치해있는 손가락표시가 아이콘





많은 수의 아이콘이 이미 준비되어 있습니다. 대체로 아이콘 명이 단어 위주로 구성되어 있기 때문에, 몇 번 훑어본 다음 그 단어를 기억만 하고 있다면(예를들어 check, inbox, glass, user, star 같은)따로 복사해두지 않고서도 충분히 입맛에 맞도록 사용할 수 있습니다.

Skeleton Font Awesome Version

현 시점(2014.1.10)에서 스킨에 적용되어 있는 font awesome 버전은 3.2.1입니다.


Font Awesome 사용하기


이제 Font Awesome을 사용할 수 있습니다. 일반적인 에디터에서도 사용 가능합니다. <i>태그를 사용합니다. <i class="icon-print"></i> icon-print처럼 <i class=아이콘 이름><i>형태로 적용하면 됩니다. 모든 아이콘을 보시려면 Font Awesome 3.2.1 Icon class 페이지↩를 참고하세요.

HTML 코드를 직접 입력하는 형태로 사용합니다.

마크다운 자체에서는 아이콘을 사용할 수 있는 그 어떠한 문법도 제공하고 있지 않기 때문에, HTML 소스코드를 직접 입력하는 형태로 사용해야 합니다.


반응형

댓글(8)

  • 2014.01.10 23:12 신고

    오~ 이거이거 괜찮네요~
    꼭 써보고 싶었어요

  • 2014.01.11 02:58 신고

    뷰온! 마크다운 요즘 인기 많네요. 처음에 볼 때 별로 눈여겨 안 봤는데, 요즘은 여기저기서 다들 마크다운 이야기가 들리니깐, 저랑 그다지 관련없는 마크다운에 관심이 가네요. 스킨실험용 티스토리 블로그에서 마크다운도 다뤄봐야겠어요. 알아두면 당장에는 아니더라도 나중에 유용할 것 같아요. 마크다운에 관해서 궁금한 것이 있으면 물어볼게요.

  • 2014.01.12 04:35

    워드프레스에서는 플러그인으로 이용하다가 티스토리에서는 어떻게 쓰는지 궁금했는데 이렇게 쓰면 되는거였군요! 좋은 정보 감사합니다^^

  • 2014.03.15 18:38 신고

    오~~ 고맙습니다.
    익숙해질 때 까지는 옆에 펼쳐 놓고 써야겠어요. ^^

  • 2014.03.15 18:40 신고

    앗, 그런데 awesome icon 페이지로 갔더니 아이콘이 하나도 보이지 않고 전부 네모로만 보입니다. 어떻게 해야 할까요?

  • 2014.08.20 20:34

    Font Awesome은 부트스트랩에 최적화되어있다고는 해도 이외의 스킨에서 사용해도 매우 멋집니다. 지금까지 사용하지 않고 있다가 요즘 사용하고 있는데, 블로그 스킨이 정말 멋져진 것 같은 느낌이 많이 듭니다.

Designed by JB FACTORY