Cannot get FontAwesome to work in Dash Plotly

Dash Python
1

Hey everyone,

I have tried all the solutions offered in this community, still couldn’t get Font Awesome to show up on my app. I have tried various FontAwesome versions (4 and 5) and tried to load the stylesheet in different ways. Still, it doesn’t show the fonts. Here is my current stylesheet call:

external_style = ['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css']
#https://use.fontawesome.com/releases/v5.8.2/css/all.css

app = dash.Dash(__name__, suppress_callback_exceptions=True,
                external_stylesheets=[dbc.themes.BOOTSTRAP, external_style],
                meta_tags=[{'name': 'viewport',
                            'content': 'width=device-width, initial-scale=1.0'}]
                )
server = app.server

BTW, this is a function that other apps are calling, which looks like this:

import dash_bootstrap_components as dbc
import dash_html_components as html



def app_page_template(data):

    PAGE_HEADER_STYLE = {
        "background-image": data["BackImg"],
        "background-repeat": "no-repeat",
        "background-size": "cover",
        "background-position": "center",
        "width": "100%",
        "height": "200px",
        "max-width": "100%",
    }

    PAGE_CONTENT_STYLE = {
        "margin-left": "0px",
        "padding": "0.5rem 3rem",
        "text-justify": "center",
    }

    #  Creating badges
    KeyWords = []
    for X in data["AppKeys"]:
        KeyWords.append(dbc.Badge(X, className="mr-2 badge badge-dark"))
#  Final Layout of the page
    layout = html.Div([
        #  App top image
        dbc.Row(
            html.Div(style=PAGE_HEADER_STYLE),
            no_gutters=True),
        html.I(id='submit-button', n_clicks=0, className='fa fa-send'),
        html.Div([
            html.I(className="fas fa-home"),
        ]),
        html.Div([
            #  App title
            html.H3(data["AppTitle"], className="text-center"),
            #  App short description
            html.P(data["AppDesc"]),
            #  App paper or other relevant doc
            html.P(data["AppPaper"], style={"font-style": "italic"}),
            #  App keywords
            html.Span(KeyWords),
            #  App usage direction for academics and industry
            html.P(data["AppUse"]),
            #  App citations in two format
            dbc.Toast([
                html.P(data["AppCite"]["normal"], style={"font-style": "italic"}),
                html.Code(data["AppCite"]["bibtex"])
            ], header="Citation"),
        ], style=PAGE_CONTENT_STYLE)
    ], style={"overflow": "hidden"})

    return layout

Every other component is showing correctly, but no font awesome. Anyone can help, please?

2

Hi @zero_point

The code for adding FontAwesome to an app looks correct. If the icon doesn’t show up, then it’s likely that the icon you specified isn’t in the version of FontAwesome you added with that URL.

For example, if you go to the FontAwesome site for v4.7:

https://fontawesome.com/v4.7/icons/

and search for fa fa-send it can’t find it. However, it looks like it’s now called fa-paper-plane

3

Hi @AnnMarieW , thanks for your reply. Unfortunately, it doesn’t show up even with the new classes you mentioned. It is frustrating. Thanks for your help anyway.

4

Ok, found a solution. I got it working by downloading the Font Awesome package (CSS and other font files) and adding it to my project as follows (under assets > fontAwesome):
image

Then, I add the CSS file like this:

external_style = ['/assets/fontAwesome/font-awesome.min.css']

app = dash.Dash(__name__, suppress_callback_exceptions=True,
                external_stylesheets=[dbc.themes.BOOTSTRAP, external_style],
                meta_tags=[{'name': 'viewport',
                            'content': 'width=device-width, initial-scale=1.0'}]
                )
server = app.server
5

Hey @zero_point - it’s great that you got it working!

Just a heads-up for dash-bootstrap-components users - the latest release makes it easier to add either FontAwesome or Bootstrap icons into an app. See more information in the Icons section of the new V1 docs here:

https://dbc-v1.herokuapp.com/docs/icons/

Here is a minimal app with the two icons from you sample code:

image


from dash import Dash, html
import dash_bootstrap_components as dbc

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

app.layout = dbc.Container([html.Div(className="fa fa-paper-plane"), html.Div(className="fa fa-home") ])

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

Hi @AnnMarieW, I tried what you suggested with the new components. I re-installed dash and plotly but it doesn’t work. I get an error that “dbc.icons.FONT_AWESOME” doesn’t exist.

7

Hi @zero_point

Nice to know that you tried it out! The dbc.icons is new in the latest release. It’s still the beta version though, so you need to be sure to install dash-bootstrap-components 1.0.03b

1 Like