如何翻转 glyphicon 图标

Question

有没有办法翻转glyphicon图标。我找到了Flip an Image CSS技巧，但那不能用于glyphicon。请给出建议。

- Jamol

---

你能展示一下你尝试过的代码吗？ - Nitesh

请参考以下链接，它可以解决问题：https://dev59.com/22Ml5IYBdhLWcg3wMkgo - anand

旋转图标，使用伪类 before/after 内容。https://dev59.com/EWkw5IYBdhLWcg3wmruH - Chris Marisic

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

- Falguni Panchal

---

这个不起作用。我没有使用fontawesome，而是使用glyphicons。 - Jamol

这对我有用，而且我也在使用glyphicons（通过Twitter Bootstrap）。 - corinnaerin

你应该记住将真正的CSS属性放在列表的最后，因为这可能会导致渲染差异：https://css-tricks.com/ordering-css3-properties/ - Berty

@jCloud 如果你想在Bootstrap Glyphicons中使用这个解决方案，你应该这样做：<a href="#" class="btn"><span class="glyphicon glyphicon-repeat icon-flipped"></span></a>。很抱歉我在评论中编码，我的编辑被拒绝了。 - Leopoldo Sanczyk

我尝试将此应用于iron-icon（这是Polymer的图标组件），但它不起作用！！@falguni-panchal，你有什么想法吗？顺便说一句，在组件内部有一个SVG图标。 - getName

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

- Jax

---

我希望它能通过嵌入类实现更优雅的解决方案。所以Bootstrap没有这样的旋转类，对吗？ - Furkan Gözükara

@MonsterMMORPG 我不知道有这样的事情。 - Jax