웹마스터 팁
벼랑끝 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 입니다.
날씨가 더우니 더위먹었는가 봅니다.
이상은 팁 아닌 팁 ... 아니었습니다.
제목 | 글쓴이 | 날짜 |
---|---|---|
404 페이지 못찾음으로 나오는 문제 수정 [9] | 화니군 | 2007.08.18 |
UTF-8과 Euc-kr 동시에 사용하기 [10] | 써니a | 2007.11.05 |
HTTP 406 Error 가 나오면서 업로드 안될때 [16] | plruto | 2008.02.08 |
404 에러 페이지를 만들어 보자 [2] | hangoon | 2008.04.11 |
cafe24사용자중 페이지에서 위젯편집시 자바스크립트 에러나시는 분들 [8] | 팔공산 | 2008.10.17 |
카페24 계정 사용 중에 제로보드XE 로그인 오류가 날 때 [1] | vltm | 2008.10.24 |
팁이라고까지 할껀 없지만.....(db날렸을때..카페24사용시) [3] | 왜만지냐 | 2009.01.06 |
카페24 웹호스팅에서 서브 도메인으로 접속 방법 [5] | 데이스타 | 2010.03.28 |
카페24 외부페이지로 트래픽 확인하기 [1] | teryboy | 2010.10.09 |
1.4.2.3 에서 1.4.3 이상 버전으로 업그레이드 시 백지화면 해결팁 [4] | 2년후 | 2010.12.15 |
PHP_6_간단한 폼 구구단을 만들어 보자 [2] | 아무흐 | 2008.03.26 |
1.4.5.2로 업데이트 후 짧은 주소가 제대로 되지 않으실때... [8] | 라르게덴 | 2011.04.12 |
IE에선 업로드 되고 Firefox chrome에서는 업로드가 안될때 | 나정생 | 2011.08.30 |
1.4 에서 1.5로 게시판 마이그레이션 팁 [12] | 마음의빈자리 | 2012.07.10 |
카페24로 옮기고 나서 모바일 레이아웃 설정 저장이 안되어서.. | 착한부산남자 | 2013.07.31 |
벼랑끝 font awesome 45도를 아시나요 ? [2] | 지그재거 | 2013.08.13 |
ipTIME NAS 에 설치한 XE, 다올CMS 첨부파일 버튼 무반응 해결 [1] | 사이버짱 | 2014.11.07 |
XE 1.8 대응 apache 2.2 / php 5.5 / MariaDB 10 설치 [11] | 간장게장같은남자 | 2015.04.19 |
bitnami ssl 클라우드플레어 설정법 | 키큰아이 | 2017.12.06 |
재치있으십니다
소소한 팁 감사합니다 ㅎㅎ^^