TYPO3 11.x bootstrap_package的filelinks图标不区分文件类型求助

问题现状 #

开启filelinks内容元素的「show fileicon」选项后，.pdf和.doc/.docx文件会共用.bootstrappackageicon-file类，导致图标完全一致；而图片文件会自动生成.bootstrappackageicon-file-image专属类来区分图标。

方案一：纯CSS快速实现（无需修改模板） #

利用TYPO3渲染filelinks时自动给链接添加的data-fileextension属性，通过CSS属性选择器匹配不同扩展名，覆盖默认图标内容：

/* PDF文件专属图标 */
.bootstrappackageicon-file[data-fileextension="pdf"]::before {
  content: "\f1c1"; /* 替换为项目使用的PDF图标Unicode，比如Font Awesome对应编码 */
}

/* DOC/DOCX文件专属图标 */
.bootstrappackageicon-file[data-fileextension="doc"]::before,
.bootstrappackageicon-file[data-fileextension="docx"]::before {
  content: "\f1c2"; /* 替换为Word图标Unicode */
}

注意：确保项目已加载对应图标字体（如Font Awesome），Unicode编码需与字体库对应。

方案二：模板重载添加专属类（更规范易维护） #

通过模板重载扩展原有逻辑，给不同扩展名的文件图标添加专属类：

1. 复制模板到站点包：将Bootstrap Package的filelinks模板文件EXT:bootstrap_package/Resources/Private/Templates/ContentElements/FileLinks.html复制到你的站点包对应路径，比如EXT:your_site_package/Resources/Private/Templates/ContentElements/FileLinks.html（TYPO3会优先加载站点包模板）。
2. 修改图标类逻辑：找到渲染图标的代码块，将默认的固定类改为动态拼接扩展名的类：
   原代码示例：

   <span class="bootstrappackageicon-file"></span>
   

   修改后：

   <span class="bootstrappackageicon-file bootstrappackageicon-file-{file.extension}"></span>
   

3. 添加对应CSS样式：

   .bootstrappackageicon-file-pdf::before {
     content: "\f1c1";
   }
   
   .bootstrappackageicon-file-doc::before,
   .bootstrappackageicon-file-docx::before {
     content: "\f1c2";
   }
   

这种方式可以为所有文件类型（如.xlsx/.zip等）快速扩展专属图标，后期维护更方便。

内容的提问来源于stack exchange，提问作者Ralho