破折号 dbc 内的图标。按钮不显示

Question

我正在编写一个破折号表单来从用户那里获取密码。我想要一个图标，允许用户以纯文本而不是隐藏的方式查看他们的输入。为此，我创建了一个带有输入和按钮的输入组。该按钮应该是可点击的，并且应该显示一个图标来切换密码是否可见。该按钮本身按预期工作，但是没有显示图标。下面是我的代码

import dash
import dash_bootstrap_components as dbc
from dash import Output, Input, State, html

from dash.exceptions import PreventUpdate


app = dash.Dash( external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME],)

app.layout = dbc.Container(
    dbc.Form(
                                            [
                                                dbc.Label("Password"),
                                                dbc.InputGroup(
                                                    [
                                                        dbc.Input(
                                                            id="signup-password",
                                                            type="password",
                                                            placeholder="",
                                                            required=True,
                                                        ),
                                                        dbc.Button(
                                                            html.I(className="bi bi-eye-fill"),
                                                            id="password-toggle",
                                                            n_clicks=0,
                                                            outline=True,
                                                            color="secondary",
                                                            style={
                                                                "cursor": "pointer",
                                                                "display": "inline-block",
                                                            },
                                                        ),
                                                    ],
                                                    className="mb-3",
                                                ),
                                            ],
                                            className="mb-3",
                                        ),
    className="p-5",
)


# Callback to toggle password visibility
@app.callback(
    Output("signup-password", "type"),
    Output("password-toggle", "children"),
    [Input("password-toggle", "n_clicks")],
    [State("signup-password", "type")],
)
def toggle_password_visibility(n_clicks, current_type):
    if n_clicks is None:
        raise PreventUpdate
    return (
        ("password", html.I(className="bi bi-eye-fill"))
        if current_type == "text"
        else ("text", html.I(className="bi bi-eye-slash-fill"))
    )



if __name__ == "__main__":
    app.run_server()

我想要显示的图标的图片可以在这里找到。我哪里错了？

Answer 1

Dash Bootstrap 组件包括两组图标：

• dbc.icons.FONT_AWESOME

  （以

  'fa'

  为前缀的图标类）

• dbc.icons.BOOTSTRAP

  （以

  'bi'

  为前缀的图标类）

您只需将

dbc.icons.BOOTSTRAP

包含在

external_stylesheets

列表中即可。