css - 如何翻转字形图标

Question

有什么办法可以翻转字形。我发现Flip an Image css 技巧，但这不适用于 glyphicon。请有任何建议

Answer 1

像这样

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

或者

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

Answer 2

使用 glyphicons 设法使这项工作像这样：

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