Kendo for Angular2：如何用 kendo glyphicon 替换网格排序图标

Question

In Kendo for Angular 2，如何用 Kendo Glyphicons 替换网格的列排序图标，目前是一个箭头？

我在我的 scss 文件中试过这个，但没有用

.k-grid-header .k-header .k-link > .k-icon {
    background-image: none; /* remove Kendo's sprite image */
    font-family: KendoUIGlyphs;
}

.k-grid-header .k-header .k-link > .k-icon.k-i-sort-desc::before {
    content: '\e61a'; /* KendoUIGlyphs down arrowhead */
}

.k-grid-header .k-header .k-link > .k-icon.k-i-sort-asc::before {
    content: '\e618'; /* KendoUIGlyphs up arrowhead */
}

Answer 1

Kendo UI for Angular 2 中的默认箭头使用字体图标，因此无需更改 font-family 或删除精灵图像。相反，只需设置伪元素内容：

.k-grid-header .k-i-arrow-n::before {
  content: '\e61a';
}

.k-grid-header .k-i-arrow-s::before {
  content: '\e618';
}

看到这个runnable demo。

Answer 2

我知道这是一个非常古老的问题，但以防万一有人想将 content 与 font-family 一起用于 pseudo-element:

.yourClass : after {
    content: "\e014";    
    font-family: 'WebComponentsIcons';
}

Kendo for Angular2：如何用 kendo glyphicon 替换网格排序图标

Kendo for Angular2: How to replace grid sort icon with kendo glyphicon

kendo-ui

kendo-ui-angular2