Formatting in Dash

Dash Python
3

Yes, you can do this in Bootstrap, but here is one way to do it without. If you are using Bootstrap, you can use the Bootstrap classes in the ClassName.

Here is an example using either Font Awesome or Unicode symbols:

image


import dash
import dash_html_components as html

FONT_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css", FONT_AWESOME]


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

roundbutton = {
    "border": None,
    "border-radius": "50%",
    "padding": 0,
    "backgroundColor": "blue",
    "color": "white",
    "textAlign": "center",
    "display": "block",
    "fontSize": 20,
    "height": 40,
    "width": 40,
    "margin": 20,
}


app.layout = html.Div(
    [
        html.Button(className="far fa-question-circle", style=roundbutton),
        html.Button(className="fa fa-list", style=roundbutton),
        html.Button("✔", style=roundbutton),
        html.Button("☏", style=roundbutton),
    ]
)


if __name__ == "__main__":
    app.run_server(debug=True)
4 Likes