웹마스터 팁
벼랑끝 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.3 에서 2.5 변경사항 데이터 테이블 구조 변경사항 체크를 정리해봅니다. [4] | 도토리나무 | 2007.11.09 |
제로보드 2.3 에서 2.5 업그레이드 방법 | 도토리나무 | 2007.11.09 |
Lavalic Lite 음악 재생기 v0.2버전 XpressEngine 1.2.5에 적용하기
[10]
[1] ![]() | 전수빈 | 2009.09.02 |
PHP_6_간단한 폼 구구단을 만들어 보자 [2] | 아무흐 | 2008.03.26 |
PHP_9_My-sql함수를 이용한 프로그램_1 | 아무흐 | 2008.07.15 |
1.4.5.2로 업데이트 후 짧은 주소가 제대로 되지 않으실때...
[8]
![]() | 라르게덴 | 2011.04.12 |
IE에선 업로드 되고 Firefox chrome에서는 업로드가 안될때 | 나정생 | 2011.08.30 |
1.4 에서 1.5로 게시판 마이그레이션 팁
[12]
![]() | 마음의빈자리 | 2012.07.10 |
기본게시판에서 익명 선택하여 "게시글, 댓글" 작성이 가능하도록 세팅하기(sketchbook5 기준) [15] | Ashon | 2013.01.08 |
벼랑끝 font awesome 45도를 아시나요 ?
[2]
![]() | 지그재거 | 2013.08.13 |
XE 1.8 대응 apache 2.2 / php 5.5 / MariaDB 10 설치 [11] | 간장게장같은남자 | 2015.04.19 |
다음 우편번호 5자리 적용
[1]
![]() | 뒤늦게입문 | 2017.03.15 |
bitnami ssl 클라우드플레어 설정법 | 키큰아이 | 2017.12.06 |
재치있으십니다
소소한 팁 감사합니다 ㅎㅎ^^