如何在QlikSense中通过CSS插入LUI库的arrow-down图标

API 探路者

2026-9-28

问题原因

LUI 图标库内部仅对驼峰格式的图标名称做了字符串到图标字形的映射，文档里标注的带连字符的多词图标名仅做展示使用，没有对应映射关系，所以单字名称的图标可以直接生效，多词连字符名称的图标无法识别。

修复方案

两种方案可选：

把content里的连字符图标名改为驼峰格式，arrow-down改为arrowDown即可，修改后的代码如下：

.source-sans-pro .qv-collapsed-listbox .title-wrapper::after {
    font-family: "LUI icons" !important;
    content: "arrowDown";
    padding-right: 10px;
}

更稳定的方案是直接使用图标对应的Unicode编码，避免字符串映射异常，你可以在LUI图标库的官方文档里找到arrow-down对应的编码值，替换下面代码中的对应位置即可：

.source-sans-pro .qv-collapsed-listbox .title-wrapper::after {
    font-family: "LUI icons" !important;
    content: "\e005"; /* 此处替换为arrow-down对应的实际Unicode编码 */
    padding-right: 10px;
}