如何在 python plotly 破折号中使用 Font Awesome 图标

Question

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

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

Answer 1

试试这个外部样式表：

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

Answer 2

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

Answer 3

奥西古尔

您的代码应如下所示：

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

代替

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

只需用__name__替换“SimpleDashboard”

这就是为什么它应该是这样的

希望这有效！

Answer 4

我使用以下内容将不同的样式表附加到应用程序并使其工作（排除 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

Answer 5

试试这个 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)

Answer 6

您已将 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)

Answer 7

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

我希望现在还不算太晚，但对于那些为此苦苦挣扎的人来说。 对我有用的最简单方法是下载缩小文件并将其包含在 Dash 应用程序的资产文件夹中。

以下是在 dash 应用程序中使用 font awesome 图标的步骤：

1. 在 font awesome 上创建帐户后，您将获得这样的脚本

<script src="https://kit.fontawesome.com/de2dsasd1.js" crossorigin="anonymous"></script>

2. 从 src 中获取 URL。 打开一个新选项卡，粘贴并按回车键。 将内容保存为 JavaScript 文件。

3. Go 到您的 Dash 应用程序，创建一个资产文件夹。 将 JavaScript 文件粘贴到那里。

4. 现在，在您的 Dash 应用程序中，只需使用图标的 awesome 字体 class 即可。 例如：

 html.H3(className="card-title" , children=[html.I(className="fa-solid fa-headphones-simple"),"Total Hours Listened"])

这是资产文件夹结构的屏幕截图：

仪表板上的 FontAwesome：