Font Awesome을 이용한 CSS 폰트 아이콘 사용방법

안녕하세요~ 미스터짱 입니다 ^^

현재 미스터짱 블로그 우측과 하단의 텍스트앞에 적용되어 나타나고있는

 "" 아이콘의 사용법을 알려드리고자 글을 씁니다.

JY-SKIN 적용법을 바로 알려드리기에 앞서 Font Awesome 이 무엇이고 기본사용법은 무엇인지 아는것이

조금더 이해하시기 편하실텐데요

이부분은 따로 글을 쓰도록 하고 오늘은 Font Awesome을 이용한 CSS 폰트 아이콘 사용방법에 대한부분만

말씀드리도록 하겠습니다.

CSS 폰트 아이콘으로 만들어 사용한 이유는 반복되는 곳마다에 Font Awesome 아이콘을 표시하기 위함입니다.

많지 않은 부분이면 Font Awesome 기본 사용법처럼 (예: <i class="fa fa-folder-open-o"></i> ) 사용하면 되는데 

적용할곳이 많다면 너무 귀찮고 번거로운 일이 아닐수 없습니다.

적용하고자 하는 CSS 코드를 찾아서 아래와 같이 넣어주시면 되는데요.

해당 코드 앞에 나타낼 때에는 :before 를 뒤에 나타내고 싶으실때는 :after 를 넣어 주시면 됩니다.

JY-SKIN을 기준으로 CSS 코드는 아래와 같습니다.

JY-SKIN 사용자 이외에 기존 폰트어썸 사용을 하시지 않으셨다면

티스토리 skin 코드 상단에 

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />

.mSide-Cbasic li a:before,  
.link_item:before,
.wrap_etc .link_board:before {
    content: "\f0da";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding-right: 5px;
    /* 그 외 입력 가능 (컬러, 폰트사이즈 등등등) */
}

content: ""; 에 들어갈 Font Awesome 코드는 아래 주소에서 확인 가능합니다.

http://astronautweb.co/snippet/font-awesome/

Font Awesome 공식 사이트 주소

http://fontawesome.io/