Hi 正在努力用 Bootstrap glyphicon-chevron-right 替换剑道面板栏的展开和折叠图标。我能想到的一种方法是使用 javascript，从字面上替换图标的每个状态。我还注意到 kendo 面板栏将以下 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'); 
} 

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

请您参考如下方法:

了解 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 */ 
}