How to use Font Awesome icons in python plotly dash

Question

I want to display Font Awesome Icons in Dash but it doesn't seem to work.

I added the font-awesome stylesheet:

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

And added this to my page:

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

But it displays nothing. What am I missing?

Answer 1

Try this for external stylesheets:

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

You have defined your external_stylesheets variable as a list, but it should just be a string. The dash.Dash(external_stylesheets=list) argument takes a list - in your case that should be [bootstrap, font-awesome] - but you are giving it a list[str, list], namely: [bootstrap, [font-awesome]]. Pass it a list of external stylesheets and it should work!

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)