如何在python plotly dash中使用Font Awesome图标

Question

我想在 Dash 中显示 Font Awesome Icons，但它似乎不起作用。

我添加了字体很棒的样式表：

external_stylesheets = ['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css']
app = dash.Dash('SimpleDashboard',external_stylesheets=[dbc.themes.BOOTSTRAP, external_stylesheets])

并将其添加到我的页面：

html.Div([
           html.I(className="fa fa-shield"),
    ])

但它什么也没显示。我错过了什么？

Answer 1

我创建了一个非常简单的破折号组件，名为 DashIconify。您可以使用它在仪表板应用程序中添加图标。https://github.com/snehilvj/dash-iconify

安装

pip install dash-iconify

用法

from dash import Dash, html
from dash_iconify import DashIconify

app = Dash(__name__)

app.layout = html.Div([
    DashIconify(
        icon="ion:logo-github",
        width=30,
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

您可以在这里搜索图标名称： https: //icon-sets.iconify.design

与现有的解决方案不同，您必须在 external_stylesheets 中包含完整的图标集，使用此库，您可以在一个应用程序中从许多不同的集合中选择图标，因为它不会完全下载这些集合，而只会下载您指定的图标。

要在您的应用程序中使用很棒的字体图标，只需执行以下操作：

app.layout = html.Div([
    DashIconify(icon="fa-solid:shield-alt")
])

Answer 2

现在您可以直接从 dash-bootstrap-components 执行此操作。这是官方文档中的示例：

dash-bootstrap-components 包含 Bootstrap Icons v1.8.1 和 Font Awesome v6.1.1 的 CDN 链接，这两个图标库可以在应用程序中使用。您可以在实例化应用程序时将它们添加到 external_stylesheets 中来使用它们中的任何一个。

import dash
import dash_bootstrap_components as dbc

# For Bootstrap Icons...
app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP]
)
# Or for Font Awesome Icons...
app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME]
)