Kendo UI 中的图标翻转答案

【问题标题】：Icon flipping in Kendo UIKendo UI 中的图标翻转
【发布时间】：2017-08-16 20:24:31
【问题描述】：

根据Kendo's docs，应该可以使用 CSS 类翻转按钮的图标（k-flip-h 水平翻转，k-flip-v 垂直翻转）。

我这样做就像使用跨度的文档一样：

$("#normal").kendoButton();
$("#flipped").kendoButton();

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
  <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>

<body>
  <div id="example">
    <button id="normal">
      <span class="k-icon k-i-pencil"/>
    </button>
    <button id="flipped">
      <span class="k-icon k-i-pencil k-flip-h"/>
    </button>
  </div>
</body>

</html>

这会产生两个看起来相同的按钮。第二个按钮应该被翻转但不是。

我认为这是有道理的，因为执行full-text search in their Github repo for "k-flip-h" 在除文档之外的任何地方都找不到“k-flip-h”文本。在他们的 Javascript 或 CSS 中找不到它。

这个功能真的存在吗？

【问题讨论】：

标签： kendo-ui telerik

【解决方案1】：

它似乎确实不见了。您可以添加以下 CSS（从 font awesome 借来的）使其工作：

.k-flip-h {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.k-flip-v {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

DEMO

【讨论】：