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

Posted 2023-05-07

【中文标题】Kendo for Angular2：如何用 kendo glyphicon 替换网格排序图标

【英文标题】：Kendo for Angular2: How to replace grid sort icon with kendo glyphicon

【发布时间】：2017-02-20 07:13:41

【问题描述】：

在 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 */

【参考方案1】：

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

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


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

看到这个runnable demo。

【讨论】：

演示只是坐在“正在加载...”，而没有实际调出网格。

我在我的环境中尝试了该解决方案，但我仍然看到箭头而不是箭头。

我更新了演示以使用公共资源。如果代码没有帮助，请提供更多详细信息，说明您的场景与演示有何不同。

感谢您的帮助。

【参考方案2】：

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

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