기 타 티스토리 블로그에 웹폰트로 몇가지 기능을 구현하려 합니다
2017.03.15 20:05
지금까지 제 블로그에선 다음과 같은 기능을 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 */
이걸 어떻게 해야 웹폰트로 바꿀 수 있을까요? 으으, 이거 너무 어렵습니다...
댓글 [2]
-
소녀시대 2017.03.15 21:59
-
TetraTheta 2017.03.16 18:38 폰트어썸은 제가 안 쓸 폰트가 가득해서 그걸 경량화 시킨게 첨부한 파일입니다. 짜피 방향 뭐 이런것 쪽으로만 쓸 생각이라서... fontello에서 font awesome 쪽 아이콘도 제공하길래 그것만 선택해서 나온게 저거죠.
티스토리 폰트어썸 검색해보시거나 폰트어썸으로 검색해보시면 관련정보 나오실꺼예요...
요즘은 이미지 대신 폰트어썸으로 많이 블로그에 적용들하시기때문에....