web-dev-qa-db-ja.com

Bootstrapでのグリフィコン/ Font Awesomeの回転

私はbootstrapサイトでグリフコンをホバーで回転させる（色の変更に加えて）を取得しようとしています。

これが私の試みです： http://jsfiddle.net/young_greedo17/88g5P/

...このコードを使用します：

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

...これが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);
}

ホバーで私が見ているものの例を次に示します（4列のウィジェットボックスATFを参照）： http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665

明らかに、色は変わりますが、それでも、CSSのトランジションに設定しているパラメーターに従っては変わりません。

ありがとう！

csstwitter-bootstrapfont-awesome
18
Tim McClure

問題は、inline要素を変換しようとしていることです-これは不可能です。

変更が必要 グリフィコンからインラインブロックへの表示値。

CSS Transforms Module の詳細は次のとおりです。

変換可能な要素

変換可能な要素は、次のカテゴリのいずれかの要素です。

  • ブロックレベルまたはアトミックインラインレベルの要素であるCSSボックスモデルによってレイアウトが制御される要素、または表示プロパティがtable-row、table-row-group、table-header-group、table-footerに計算される要素-group、table-cell、またはtable-caption [CSS21]

  • sVG名前空間の要素で、属性transform、「patternTransform」またはgradientTransform [SVG11]を持つCSSボックスモデルによって管理されていない要素

18
Adrift

新しいフォントawesomeが導入されましたrotate表記 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
20
drpawelo

font-awesome.cssファイルは、セレクターのdisplay: inlineを設定します：[class^="icon-"], [class*="icon-"]。これは、CSSファイルの161行目で確認できます。

[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;
}

したがって、.widgetbox [class*="icon-"]にプロパティdisplay: block;を設定する必要があります http://jsfiddle.net/88g5P/6/

編集：display:block;とdisplay:inline-block;の違いを調べた後、私はこれに出会いました スタックオーバーフローに関する簡単な視覚的回答 。この答えに基づいて、おそらくdisplay:inline-blockを使用する方が良いでしょう

2
djiango

特定のケースでは、使用しているアイコンにdisplay: inline-block、 追加した display:blockをカスタムCSSに追加すると、動作します。

1
Timothy Walters

インライン要素では回転が機能しないため、アイコンの表示設定をオーバーライドする必要があります

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

     ...

     display:block;
}
1
jbr3zy