如何翻转字形图标

Posted 2023-03-06

【中文标题】如何翻转字形图标

【英文标题】：how to flip glyphicon icon

【发布时间】：2013-09-07 17:21:25

【问题描述】：

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

【问题讨论】：

你能展示你试过的代码吗？

参考这个链接它可以工作***.com/questions/18604829/…

在内容***.com/questions/9779919/…987654323@

【参考方案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

【讨论】：

这不起作用。我没有使用 fontawesome。我正在使用字形图标

这对我有用，我也在使用 glyphicons（通过 twitter 引导程序）

您应该记住将真正的 css 属性放在列表的最后，因为这在某些情况下可能会导致渲染差异：css-tricks.com/ordering-css3-properties

@jCloud 要将此解决方案与 Bootstrap Glyphicons 一起使用，您应该这样做：<a href="#" class="btn"><span class="glyphicon glyphicon-repeat icon-flipped"></span></a>。抱歉在 cmets 中编码，我的编辑被拒绝了。

我试图将它应用到 iron-icon（这是 Polymer 的图标组件），但没有成功！ @falguni-panchal 你有什么想法吗？在组件内部有一个 svg 图标 btw

【参考方案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

【讨论】：

我希望它通过嵌入式类有更优雅的解决方案。所以bootstrap没有这样的类来旋转吗？

@MonsterMMORPG 我不知道。