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

【问题标题】：How to use Font Awesome icons in python plotly dash如何在 python plotly dash 中使用 Font Awesome 图标
【发布时间】：2019-11-28 02:47:20
【问题描述】：

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

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

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"),
    ])

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

【问题讨论】：

你看过这里吗？ community.plot.ly/t/…
@SSharma 是的，我尝试了那里建议的解决方案，但图标无法显示。

标签： python html font-awesome plotly-dash

【解决方案1】：

对外部样式表试试这个：

external_stylesheets = [
{
    'href': 'https://use.fontawesome.com/releases/v5.8.1/css/all.css',
    'rel': 'stylesheet',
    'integrity': 'sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf',
    'crossorigin': 'anonymous'
}
]

【讨论】：

嘿，感谢您的建议，不幸的是，这不起作用。图标仍然没有出现

【解决方案2】：

您已将 external_stylesheets 变量定义为一个列表，但它应该只是一个字符串。 dash.Dash(external_stylesheets=list) 参数需要一个列表 - 在你的情况下应该是 [bootstrap, font-awesome] - 但你给它一个列表 [str, list]，即： [bootstrap, [font-awesome ]]。将外部样式表列表传递给它，它应该可以工作！

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

【讨论】：

【解决方案3】：

确保 font-awesome 的版本包含您引用的图标 + font-awesome 类前缀可战斗性。

对于4.7.0，您应该使用以下参考：

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

如果您使用的是5.8.1，请使用以下内容：

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

【讨论】：

【解决方案4】：

我创建了一个名为 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")
])

【讨论】：

【解决方案5】：

AUBSieGUL

您的代码应如下所示：

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

而不是

app = dash.Dash('SimpleDashboard',external_stylesheets=[dbc.themes.BOOTSTRAP, external_stylesheets])

只需将“SimpleDashboard”替换为__name__

Here is why应该是这样的

希望这行得通！

【讨论】：

【解决方案6】：

我使用以下内容将不同的样式表附加到应用程序并让它与它一起工作（排除 dbc.themes.BOOTSTRAP,'./assets/mycss.css' 以使其运行，我在这里添加它们只是为了展示如何添加不同的类型）：

import dash_bootstrap_components as dbc
for css in [dbc.themes.BOOTSTRAP,
            './assets/mycss.css',
            'https://use.fontawesome.com/releases/v5.8.1/css/all.css']:
   app.css.append_css({"external_url": css})

在布局中：

dbc.Button(children=[html.I(className="fas fa-plus-square")])

也许还可以事先检查您想要的图标是否在此处列出 https://use.fontawesome.com/releases/v5.8.1/css/all.css

【讨论】：

【解决方案7】：

为 external_stylesheets 尝试这种布局：似乎对我有用。

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc

external_stylesheets = [
    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
     dbc.themes.SLATE
]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


app.layout = html.Div([

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

])

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

【讨论】：