기 타 티스토리 블로그에 웹폰트로 몇가지 기능을 구현하려 합니다
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 쪽 아이콘도 제공하길래 그것만 선택해서 나온게 저거죠.
번호 | 제목 | 글쓴이 | 조회 | 등록일 |
---|---|---|---|---|
[공지] | 질문과 답변 게시판 이용간 유의사항 | gooddew | - | - |
4250 | 기 타| 배치파일에 대한 질문입니다. 고수님의 답변 기대.....^^ [5] | 럭키보이 | 306 | 03-22 |
4249 | 기 타| 크롬 다운로드 할때 바로 열기 안되나요?? [1] | FanTaG | 1466 | 03-21 |
4248 | 기 타| http://www.kbench.com <- 요즘 갑자기 접속이 안되네요?. [2] | 카메리아 | 638 | 03-21 |
4247 | 기 타| WOL 불가 [5] | asklee | 407 | 03-21 |
4246 | 기 타| 컴퓨터가 자동으로 켜지는 증상.. [5] | Lr라 | 983 | 03-21 |
4245 | 기 타| grub 부트메뉴 질문좀 드릴게요~ | 알카이저 | 215 | 03-21 |
4244 | 기 타| BlueStacks 업데이트 제거 [2] | 용마니 | 279 | 03-20 |
4243 | 기 타| 왕초보입니다 문의드립니다 [11] | 흰구름 | 625 | 03-19 |
4242 | 기 타| 컴 부품 호환 봐주세요. [6] | 청휘 | 465 | 03-19 |
4241 | 기 타| 인터넷 통신함 공유기 설치 질문이요 [3] | Dr.Nick | 714 | 03-19 |
4240 | 기 타| 심재규 사이트 문닫아서요? [2] | gkgk77 | 758 | 03-19 |
4239 | 기 타| 네트워크 랜카드문제 질문드립니다.고수님들 부탁드리겠습... [6] | 파천황 | 379 | 03-17 |
4238 | 기 타| 저기 무선인더 키보드는되고 [5] | ㄷㄱ | 190 | 03-17 |
4237 | 기 타| 지난 7년 간 잘 써오던 마우스?가 오늘 [8] | ㄷㄱ | 407 | 03-17 |
4236 | 기 타| 메인보드만 바꾸면 다른기기가 되나요? [4] | cosmosa | 688 | 03-16 |
» | 기 타| 티스토리 블로그에 웹폰트로 몇가지 기능을 구현하려 합니다 [2] | TetraTheta | 253 | 03-15 |
4234 | 기 타| 구글 홈페이지 [5] | 오후9시7분 | 424 | 03-15 |
4233 | 기 타| path 연결 법 문의드립니다. [1] | 나양말많아 | 186 | 03-15 |
4232 | 기 타| 수동 고스트복구 방법 Symantec Ghost 12.0.0.6277 [11] | gkgk77 | 1430 | 03-14 |
4231 | 기 타| 기가인터넷(500MB) 설치 했는데 속도가 영~~~ [8] | 노라기 | 2622 | 03-13 |
티스토리 폰트어썸 검색해보시거나 폰트어썸으로 검색해보시면 관련정보 나오실꺼예요...
요즘은 이미지 대신 폰트어썸으로 많이 블로그에 적용들하시기때문에....