如何在Streamlit应用中使用Font-Awesome-Kit渲染图标？

以下是针对你遇到的问题的具体排查和解决步骤：

1. 核心排查：确认Font Awesome Kit的权限与链接正确性 #

• 检查图标样式权限：你使用的fa-duotone是Font Awesome Pro专属样式，免费版Kit无法加载这类图标。如果你的Kit是免费版，需要替换为fa-solid/fa-regular/fa-brands这类免费可用的样式。
• 替换占位符链接：代码中的xyz.js/zax.css是占位符，必须替换为从Font Awesome官网Kit页面获取的真实链接（格式为https://kit.fontawesome.com/你的专属KitID.js）。

2. 正确注入Kit资源到Streamlit #

Streamlit的页面渲染机制可能导致单独注入的资源加载顺序异常，建议统一用st.markdown或st.components.v1.html包裹资源与图标：

方法一：用st.markdown统一注入 #

import streamlit as st

# 先注入Kit的JS资源
st.markdown("""
<script src="https://kit.fontawesome.com/你的真实KitID.js" crossorigin="anonymous"></script>
""", unsafe_allow_html=True)

# 再渲染图标（免费版用fa-solid示例，Pro版可替换为fa-duotone）
st.markdown('<i class="fa-solid fa-calendar-days"></i> 日历图标', unsafe_allow_html=True)

方法二：用components.v1.html隔离渲染（适合独立组件场景） #

如果用st.components.v1.html，需要把Kit资源和图标放在同一个HTML块中，避免iframe隔离导致资源无法访问：

import streamlit as st

st.components.v1.html("""
<script src="https://kit.fontawesome.com/你的真实KitID.js" crossorigin="anonymous"></script>
<i class="fa-solid fa-calendar-days"></i>
""", height=30)

3. 检查Kit的域名授权设置 #

如果你的Streamlit应用部署在公网（比如share.streamlit.io或自定义域名），需要在Font Awesome官网的Kit配置页面，将应用域名添加到Domains允许列表中，否则Kit资源会被浏览器的跨域策略阻止加载。

4. 验证资源加载状态 #

打开Streamlit应用的浏览器开发者工具（F12），切换到Network标签，刷新页面后检查Kit的JS/CSS资源是否成功加载：

• 如果资源返回403/404，说明链接错误或域名未授权
• 如果资源加载正常但图标不显示，检查图标类名是否正确，以及Kit是否支持该样式

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