Xoay Glyphicons/Font Awesome trong Bootstrap

Question

Tôi đang cố gắng để có được các glyphicons trong trang web bootstrap của tôi để xoay trên di chuột (ngoài việc thay đổi màu sắc).

Đây là nỗ lực của tôi: http://jsfiddle.net/young_greedo17/88g5P/

... trong đó sử dụng mã này:

<div class="widgetbox"> 
    <br><br> 
    <div class="icon-calendar icon-large"></div> 
    <h5>Add an event</h5> 
</div> 

... đây là CSS:

.widgetbox { 
    width: 250px; 
    height: 250px; 
    background-color: black; 
    color: white; 
    text-align: center; 
} 
.widgetbox [class*="icon-"] { 
    -webkit-transition-duration: 1.0s; 
    -moz-transition-duration: 1.0s; 
    -o-transition-duration: 1.0s; 
    transition-duration: 1.0s; 

    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    -o-transition-property: -o-transform; 
    transition-property: transform; 
} 
.widgetbox:hover [class*="icon-"] { 
    color: #24a159 !important; 
    -webkit-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
    transform:rotate(360deg); 
} 

Dưới đây là một ví dụ về những gì tôi tìm cách xảy ra khi di chuột qua (xem bốn hộp tiện ích cột ATF): http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665

Rõ ràng, màu sắc thay đổi, nhưng ngay cả điều đó cũng không thay đổi theo các thông số tôi đang thiết lập cho quá trình chuyển đổi trong CSS.

Cảm ơn!

Answer 1

Vấn đề là bạn đang cố chuyển đổi thành phần inline - điều này là không thể.

Bạn sẽ need to change giá trị hiển thị của hình tượng trưng cho khối nội tuyến.

---

Sau đây là các chi tiết từ CSS Transforms Module: yếu tố năng biến

Một yếu tố năng biến là một yếu tố trong một trong các loại:

• một phần tử có bố cục được điều chỉnh bởi mô hình hộp CSS là phần tử cấp nội dung cấp khối hoặc nguyên tử hoặc thuộc tính hiển thị của nó tính toán theo hàng-bảng, nhóm-hàng-nhóm, nhóm-tiêu đề-nhóm, bảng-chân trang -group, table-cell, hoặc bảng chú thích [CSS21]

• một yếu tố trong không gian tên SVG và không bị chi phối bởi các mô hình CSS hộp trong đó có các thuộc tính biến đổi, 'patternTransform' hoặc gradientTransform [SVG11] `

Answer 2

font-awesome.css bộ tệp display: inline cho bộ chọn của bạn: [class^="icon-"], [class*="icon-"]. Bạn có thể thấy điều này tại dòng 161 của file CSS:

[class^="icon-"], 
    [class*=" icon-"] { 
    display: inline; 
    width: auto; 
    height: auto; 
    line-height: normal; 
    vertical-align: baseline; 
    background-image: none; 
    background-position: 0% 0%; 
    background-repeat: repeat; 
    margin-top: 0; 
} 

Vì vậy, bạn cần phải thiết lập các .widgetbox [class*="icon-"] để có một tài sản display: block; http://jsfiddle.net/88g5P/6/

EDIT: sau khi nhìn lên sự khác biệt giữa display:block; và display:inline-block;, tôi xuất hiện trên trang này simple visual answer on Stack overflow.Dựa trên câu trả lời này, nó có thể là tốt hơn để sử dụng display:inline-block

Answer 3

bạn cần phải ghi đè thiết lập hiển thị của biểu tượng, kể từ khi xoay sẽ không hoạt động trên các yếu tố inline

.widgetbox [class*="icon-"] { 

    ... 

    display:block; 
} 

Answer 4

Trong trường hợp cụ thể của bạn vấn đề là các biểu tượng bạn đang sử dụng có display: inline-block, tôi đã thêm display:block vào CSS tùy chỉnh và giờ đây nó hoạt động.

Answer 5

New Font tuyệt vời giới thiệu xoay ký hiệu http://fontawesome.io/examples/

//Normal: 
<i class="fa fa-shield"></i>&nbsp; normal<br> 

//Rotated: 
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br> 
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br> 
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br> 

//Flipped 
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br> 
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical