如何翻转glyphicon图标

时间:2013-09-04 09:14:44

标签: css icons flip glyphicons

有没有办法翻转glyphicon。我发现Flip an Image css技巧,但这对glyphicon不起作用。请提出任何建议

2 个答案:

答案 0 :(得分:65)

喜欢这个

<强> 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

答案 1 :(得分:16)

使用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此处