web-dev-qa-db-ja.com

グリフィコンのアイコンを反転する方法

グリフィコンを反転する方法はありますか。 Flip an Image css trickを見つけましたが、グリフィコンでは機能しません。提案をお願いします

cssiconsflipglyphicons
38
Jamol

このような

[〜＃〜] html [〜＃〜]

<a href="#" class="btn"><i class="icon-rotate icon-flipped"></i></a>

[〜＃〜] css [〜＃〜]

.icon-flipped {
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}

[〜＃〜] or [〜＃〜]

http://fortawesome.github.io/Font-Awesome/examples/#rotated-flipped

72
Falguni Panchal

グリフィコンを使用して、このように機能させることができました。

HTML

<span class="glyphicon glyphicon-search" id="my-glyphicon"></span>

CSS

#my-glyphicon {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

JSFiddle こちらをご覧ください

16
Jax