Kendo Panel Bar更改折叠图标

Question

嗨正在努力用bootstrap glyphicon-chevron-right替换kendo面板栏展开和折叠图标.我可以想到的一种方法是使用javascript,逐字地替换每个图标状态.我还注意到kendo panelbar将以下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');
}

但是我已经下载了一个glyphicon,即使这样也无法正常工作..有什么解决方案吗？

Answer 1

关于Glyphicons的重要一件事是它们是字体字符。如果要使用它们将CSS纯粹替换为图标，只需隐藏现有图标，然后在其位置插入Glyphicon即可。

首先隐藏Kendo图标图像，然后添加适当的字体：

.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 */
}

Answer 2

您可以通过更改 css 中字形图标上的图像位置来完成

例子：

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

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