如何自定义Font Awesome图标，在Odoo中不导入全量FA v5添加TikTok图标

以下3种方案均不会和系统自带的Font Awesome v4产生冲突，也不需要引入全量v5资源：

方案1：自定义CSS类（推荐，兼容原有FA调用习惯） #

直接把TikTok图标以Data URI的形式绑定到自定义FA类上，和原有FA图标使用方式完全一致：

• 在自定义Odoo模块的静态CSS文件中添加如下代码：

/* 自定义TikTok图标，兼容原生Font Awesome 4调用规范 */
.fa.fa-tiktok:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.2,121.2,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z' fill='currentColor'/></svg>");
  background-size: contain;
  vertical-align: -0.125em;
}

• 调用方式和原生FA图标完全相同：<i class="fa fa-tiktok"></i>，图标颜色、大小会自动继承父元素的字体样式，和原有FA图标表现统一。

方案2：内联SVG直接使用 #

适合仅在少数位置用到TikTok图标的场景，无需额外引入CSS：

• 直接把SVG代码嵌入Odoo视图文件对应位置即可：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor" style="vertical-align: -0.125em;">
  <path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.2,121.2,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"/>
</svg>

• 调整宽高、fill属性即可自定义图标样式，灵活性最高。

方案3：导出单图标字体文件 #

适合需要大量复用该图标的场景：

• 用字体子集化工具仅提取Font Awesome v5中的TikTok图标，导出为体积仅几KB的自定义字体文件
• 在自定义模块CSS中引入该字体，绑定对应类名即可，和原生FA的字体渲染逻辑完全一致。

注意事项 #

• 所有自定义资源都要放在你自己开发的Odoo模块的static/对应目录下，在模块的__manifest__.py中注册资源即可生效
• 不要修改Odoo系统自带的Font Awesome v4相关文件，避免后续系统升级时自定义内容被覆盖。

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