在Dash-Leaflet实时地图中使用FontAwesome图标遇阻求助

问题说明 #

开发带实时地图的Dash-Leaflet应用，标记30秒更新功能正常，但替换为FontAwesome图标后样式不符合预期。此前在Folium中可轻松实现该效果，现需让图标显示正常且支持颜色自定义。

问题原因 #

1. HTML字符转义错误：代码中使用了<、"这类转义字符，导致FontAwesome图标无法正确渲染
2. DivMarker参数误用：错误使用iconOptions参数，DivMarker需通过icon参数配置DivIcon
3. 缺少自定义CSS：默认DivMarker样式会影响图标显示，需清除多余背景、边框

修正后的代码示例 #

1. 引入外部资源与基础配置

external_scripts = [
    {
        'src':'https://kit.fontawesome.com/6f4324546a.js',
        'crossorigin':'anonymous'
    }
]

external_stylesheets = [
    # 添加自定义CSS消除DivMarker默认样式
    {
        'href': 'data:text/css;charset=utf-8,'''
            .myDivIcon {
                background: transparent !important;
                border: none !important;
                padding: 0 !important;
            }
        ''',
        'rel': 'stylesheet'
    }
]

app = Dash(__name__,
           external_scripts=external_scripts,
           external_stylesheets=external_stylesheets)

2. 定义FontAwesome图标

# 直接使用未转义的HTML，无需转义字符
green_icon = dl.DivIcon(
    html='<i class="fa-solid fa-kiwi-bird" style="color: green; font-size: 24px;"></i>',
    className='myDivIcon',
    iconSize=[40, 40]
)

red_icon = dl.DivIcon(
    html='<i class="fa-solid fa-kiwi-bird" style="color: red; font-size: 24px;"></i>',
    className='myDivIcon',
    iconSize=[40, 40]
)

def choose_icon(condition):
    return green_icon if condition else red_icon

3. 生成标记

markers_data = []
for bird in bird_map_devices:
    if bird['gps'] != 'False':
        markers_data.append(
            dl.DivMarker(
                position=(bird['gps']['Location']['Latitude'], bird['gps']['Location']['Longitude']),
                children=[dl.Tooltip(bird['name'])],
                # 使用icon参数传递DivIcon实例，而非iconOptions
                icon=choose_icon(True)
            )
        )

return [dl.TileLayer()] + markers_data

关键调整点 #

• 移除HTML转义字符，直接写入<i>标签和样式
• 将iconOptions替换为icon参数，传入dl.DivIcon实例而非字典
• 添加自定义CSS清除DivMarker的默认背景、边框，确保图标纯净显示
• 可通过style中的font-size调整图标大小

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