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>&nbsp; icon-rotate-45<br>

icon_rotate45.png

 요게 흔들바위 벼랑끝 font awesome 45 입니다.

날씨가 더우니 더위먹었는가 봅니다.

이상은 팁 아닌 팁 ... 아니었습니다.