如何为TYPO3 Bootstrap Package添加TikTok社交媒体图标

以下是几种可行的方法，按操作复杂度从低到高排序：

方法一：直接通过常量配置指定自定义图标类（最简单） #

这种方法依赖第三方图标库（比如Font Awesome），步骤如下：

• 先在站点中引入Font Awesome资源：将Font Awesome的CSS文件放入站点包的Resources/Public/Css/目录，然后在模板中引入，或者通过Typoscript配置加载。
• 在站点包的constants.typoscript中，为TikTok条目添加icon字段，指定图标类：

plugin.tx_bootstrappackage.settings.social.tiktok {
  enable = 1
  network = tiktok
  title = TikTok
  url = https://tiktok.com/your-profile
  icon = fab fa-tiktok
}

配置完成后，bootstrap_package的默认图标渲染逻辑会直接使用这个类名，显示TikTok图标。

方法二：自定义SVG图标并覆盖模板Partial #

如果不想用第三方图标库，可自行添加SVG图标：

1. 在你的站点包Resources/Private/Partials/Icons/目录下创建Tiktok.html文件，写入TikTok的SVG代码（可从官方图标库复制并调整尺寸、颜色适配站点样式）：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
  <path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"/>
</svg>

2. 在站点包的setup.typoscript中设置Partial路径优先级，让系统优先加载自定义模板：

plugin.tx_bootstrappackage.view.partialRootPaths.10 = EXT:your_site_package/Resources/Private/Partials/

注意：将your_site_package替换为你的站点包扩展名，优先级数字（10）要高于bootstrap_package默认的0，确保自定义Partial被优先加载。

3. 确保constants.typoscript中的TikTok配置没有设置icon字段，系统会自动加载你创建的Icons/Tiktok.html文件渲染图标。

方法三：直接修改bootstrap_package源文件（不推荐） #

不建议此方法，因为更新bootstrap_package时会丢失修改：找到bootstrap_package的Resources/Private/Partials/Icons/目录，添加Tiktok.html文件并写入SVG代码即可。

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