웹마스터 팁
벼랑끝 font awesome 45도를 아시나요 ?
2013.08.13 18:35
font awesome의 font 가 4각일 경우 rotate ... 90도 180도 270도로 돌려 보았자 역시나 안정감있게 바닥에 착 달라 붙습니다.
이것을.. 불안불안하게 .. 흔들바위 처럼 rotate 45도로 돌려 보자고 생각해낸 벼랑끝 ... font awesome 45 입니다.
font awesome 은 90deg , 180deg , 270 deg 만 rotate 하도록 .css로 코딩되어 있습니다.
여기에 45deg 를 추가합니다.
작업명 : icon-rotate-45
1. 위치 : addons > font-awesome > css > font-awesome.css 추가
1-1)
.icon-rotate-45:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}
1-2)
/* ensure rotation occurs inside anchor tags */
a .icon-rotate-45:before,
2. 위치 : addons > font-awesome > css > font-awesome.min.css 추가
2-1)
.icon-rotate-45:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.7071067811865476,M12=-0.7071067811865475,M21=0.7071067811865475,M22=0.7071067811865476);/*IE6,IE7*/-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.7071067811865476,M12=-0.7071067811865475,M21=0.7071067811865475,M22=0.7071067811865476)";/*IE8*/}
2-2)
a .icon-rotate-45:before,
결과물은 다음 그림과 같습니다.
<i class="icon-flag icon-rotate-45 icon-4x pull-left icon-border"></i> icon-rotate-45<br>
icon_rotate45.png
요게 흔들바위 벼랑끝 font awesome 45 입니다.
날씨가 더우니 더위먹었는가 봅니다.
이상은 팁 아닌 팁 ... 아니었습니다.
댓글 2
제목 | 글쓴이 | 날짜 |
---|---|---|
게시판 스킨에서 조회수, 추천수, 최근 수정일 외 항목도 정렬가능하게 하기 | SMaker | 2009.06.11 |
로그인 페이지 만드는 방법 [5] | 산토 | 2009.06.12 |
외부문서에서 mms:// 태그 사용하기 [11] | 아고라 | 2009.06.12 |
에디터 컴포넌트 목록이 안 나올 때 해결법 [2] | SMaker | 2009.06.14 |
layout.html에 접근 못하게막기. [8] | Habile | 2009.06.15 |
업데이트 후 Rewrite mod 사용이 안돼는 경우 [2] | 겨우리851 | 2009.06.18 |
XE용 query xml 방식으로 일반 테이블도 접근 처리 하기 [1] | 라르게덴 | 2009.06.18 |
확장변수 폼 디자인 하기 [14] | Diver | 2009.06.21 |
게시판 메뉴에 새글 알림 표시 띄우기 [13] | 보거스내친구 | 2009.06.21 |
개인쪽지발송!~ | noirzo | 2009.06.23 |
로그인 후 그룹별로 다른 페이지로 가기 - 업데이트판 v1.5 [19] | 무대포2 | 2009.06.24 |
쪽지 답글 보내기 원본 내용 삭제 | 절망린 | 2009.06.24 |
보낸 쪽지함에서 쪽지 내용 안에 회원 아이콘이 제대로 표시 되지 않을때.. | 절망린 | 2009.06.24 |
페이지 제일 위로 바로가는 Top 버튼 [5] | 개돌 | 2009.06.26 |
로그인 & 파일 첨부 문제 [3] | peter99 | 2009.06.29 |
이미지 리사이즈 적용이 안되는 경우 [4] | 아고라 | 2009.06.30 |
확장변수에 회원정보를 넣어보자 [10] | 개돌 | 2009.06.30 |
지오피아 게임 제로보드 XE 연동 [5] | 다른사람 | 2009.06.30 |
달력형 리스트 입니다. [5] | 착한악마 | 2009.07.01 |
제로보드 매뉴얼 version 0.63 입니다. [16] | 윈매니아 | 2009.07.03 |