기 타 티스토리 블로그에 웹폰트로 몇가지 기능을 구현하려 합니다

지금까지 제 블로그에선 다음과 같은 기능을 png 파일로 해결해 왔습니다.

 - '더보기'옆의 + 아이콘

 - 우측 하단의 맨 아래/위 바로가기 링크

 - 외부 링크에만 우측에 아이콘 삽입

그런데 웹폰트라는 걸 알게 되었습니다. 이게 png 방식보다 여러모로 우월하더군요... 그래서 fontello에 가서 원하는 아이콘만 따로 빼와서 폰트까지 만들어 놨습니다. fontello-b8bfa7fa.zip

그런데 정작 이걸 받아놓고서 어떻게 적용하는지 모르겠는겁니다. 가능하면 기존에 보이던 모습 그대로 하고 싶은데... 어떻게 할지 모르겠습니다.

일단 HTML/CSS 쪽은 각각 이렇습니다.

① '더보기'옆의 +아이콘

-------- CSS --------

/* 본문 - more / less 더보기 */
.moreless_fold
{ background:url("images/more1.png") no-repeat 0 50%; padding-left:20px; color:#2196F3; font-weight:bold; text-align:left; background-size:17px 17px;}
.moreless_top
{ background:url("images/less1.png") no-repeat 0 50%; padding-left:20px; color:#2196F3; font-weight:bold; text-align:left; background-size:17px 17px;}
.moreless_body
{ }
.moreless_bottom
{ background:url("images/less1.png") no-repeat right 50%; padding-right:20px; color:#2196F3; font-weight:bold; text-align:right; background-size:17px 17px;}
.moreless_fold span{color:#2196F3;font-weight:bold;}
.moreless_top span{color:#2196F3;font-weight:bold;}
.moreless_bottom span{color:#2196F3;font-weight:bold;}

② 우측 하단의 맨 아래/위 바로가기 링크

-------- HTML --------

    <!-- TOP 버튼 추가 -->
    <a href="#" class="jcm-top">
      <img src="./images/top.png" style="margin-bottom: 60px;width:50px;">
    </a>
    <!-- 아이콘 자체 크기 조절 -->
    <a href="#dkFoot" class="jcm-bottom">
      <img src="./images/bottom.png" style="margin-bottom: 60px;width:50px;">
    </a>
    <!-- 아이콘 자체 크기 조절 -->
    <script>
      $( document ).ready( function() {
        $( window ).scroll( function() {
          if ( $( this ).scrollTop() > 300 ) {
            /* 버튼 출현위치 결정 */
            $( '.jcm-top' ).fadeIn();
          }
          else {
            $( '.jcm-top' ).fadeOut();
          }
        }
                          );
        $( '.jcm-top' ).click( function() {
          $( 'html, body' ).animate( {
            scrollTop : 0 }
                                    , 200 );
          /* 숫자 작을수록 빠름 */
          return false;
        }
                             );
      }
                         );
    </script>
    <script>
      $( document ).ready( function() {
        $( window ).scroll( function() {
          if ( $( this ).scrollTop() > 300 ) {
            /* 버튼 출현위치 결정 */
            $( '.jcm-bottom' ).fadeIn();
          }
          else {
            $( '.jcm-bottom' ).fadeOut();
          }
        }
                          );
        $( '.jcm-bottom' ).click( function() {
          $( 'html, body' ).animate( {
            scrollTop : $(document).height() }
                                    , 200 );
          /* 숫자 작을수록 빠름 */
          return false;
        }
                                );
      }
                         );
    </script>

-------- CSS --------

/* TOP 버튼 */
a.jcm-top {
    position: fixed;
    right: 15px;
    bottom: 15px;
    border-radius: 5px;
    color: #ffffff;
      text-align: center;
      width: 50px; /* 여기서 크기 조절 */
      height: 50px;
      font-size: 40px;
    background-color: rgba(0,0,0,0.3);
    z-index: 99999;
        display: none;}
a.jcm-top:hover{background-color:#000}
a.jcm-bottom {
    position: fixed;
    right: 65px;
    bottom: 15px;
    border-radius: 5px;
    color: #ffffff;
      text-align: center;
      width: 50px; /* 여기서 크기 조절 */
      height: 50px;
      font-size: 40px;
    background-color: rgba(0,0,0,0.3);
    z-index: 99999;
        display: none;}
a.jcm-bottom:hover{background-color:#000}

③ 외부 링크에만 우측에 아이콘 삽입

-------- CSS --------

/* Start of Adding icon to external link */
.area_view a[href ^="https://"] {
 background: url(./images/external.png) center left no-repeat;
 padding-left: 20px;
}
.area_view a[href ^="https://"] {
 background: url(./images/external.png) center left no-repeat;
 padding-left: 20px;
}
.area_view a[href^="https://tetralog.tistory.com"] {
 background: none;
 padding-left: 0;
}
.area_view a[href^="https://tetralog.tistory.com"] {
 background: none;
 padding-left: 0;
}
/* End of Adding icon to external link */

이걸 어떻게 해야 웹폰트로 바꿀 수 있을까요? 으으, 이거 너무 어렵습니다...