剑道面板栏更改折叠图标答案

【问题标题】：Kendo Panel Bar Change collapse icon剑道面板栏更改折叠图标
【发布时间】：2014-03-17 08:13:13
【问题描述】：

Hi 正在努力用引导 glyphicon-chevron-right 替换 kendo 面板栏展开和折叠图标。我能想到的一种方法是使用 javascript，从字面上替换图标的每个状态。我还注意到剑道面板栏将以下 css 添加到跨度中，例如：

k-icon k-i-arrow-s k-panelbar-expand  -- when collapsed

k-icon k-i-arrow-n k-panelbar-collapse-- when expanded

我试过这样做

#leftcontentnav .k-panelbar > li > span >.k-icon {
    background-color: transparent;
    opacity: 0.8;
    border-color: transparent;
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    background-repeat: no-repeat;
    font-size: 0;
    line-height: 0;
    text-align: center;
    background-image: url('../Images/download.jpg');
}

但是我已经下载了一个字形图标，即使它也不能正常工作..有什么解决办法吗？

【问题讨论】：

标签： javascript css twitter-bootstrap kendo-ui panelbar

【解决方案1】：

关于 Glyphicons 的重要一点是，它们是字体字符。如果您想使用它们来完全用 CSS 替换图标，只需隐藏现有图标并在其位置插入 Glyphicon。

先隐藏剑道图标图片，并添加合适的字体：

.k-panelbar .k-icon {
    background-image: none;

    font-family: 'Glyphicons Halflings';
    font-size: 1em;
    overflow: visible;
}

然后用 ::before 选择器插入你想使用的字符：

.k-panelbar-expand::before {
    content: "\e114"; /* glyphicon-chevron-down */
}

.k-panelbar-collapse::before {
    content: "\e113"; /* glyphicon-chevron-up */
}

【讨论】：

这太棒了，我在尝试更改 Kendo 中的图标时遇到了同样的问题。感谢您的回答！

【解决方案2】：

您可以在 CSS 中更改字形图标上图像的位置

示例：

.k-i-arrow-s { background-position: -96px 0; }
.k-i-arrow-n { background-position: -120px 0; }

您必须计算字形图标上的位置。

【讨论】：