Black Lives Matter. Please consider donating to Black Girls Code today.

Anyone got font-awesome fonts displayable within Dash?

Just wondering if there’s an html.i() method to invoke

‘’’<i class="fa fa-camera-retro fa-lg>’’’

or similar. I can’t find any docs on the core or html components (yet)…

Ian W.

All of the html attributes should be available inside the html package in upper case form.
So instead of <div/> it’s html.Div. In this case, instead of <i/> it’s html.I.
The other exception is that instead of class it’s className. Learn more about this in https://plot.ly/dash/dash-html-components

So, in this case, you should be able to specify an icon with

html.I(className="fa fa-camera-retro fa-lg")

That’s magic. Thank you.

1 Like

Hi, chriddyp, thanks for the reply. I’m trying to do the same in Dash Tab but fails to show up:

    dcc.Tab(
        className=html.I(className="fas fa-chart-bar"),
        label="Analysis",

However this works:

    dcc.Tab(
        className="fas fa-chart-bar",
        label="Analysis",

But there is a big problem with the second approach. Font Awesome has some fixed width icons, e.g. fa-fw and from what I see in the tutorials, e.g. here:
https://fontawesome.com/v4.7.0/examples/
We only need to write something like

    dcc.Tab(
        className="fas fa-chart-bar fa-fw",
        label="Analysis",

to separate the FA icons and “Analysis”. Somehow I can’t do this in Dash, not sure what could be the problem? Thanks

I was able to get this working. The HTML for the power-off icon is:

<i class="fa fa-power-off" aria-hidden="true"></i>

One of the issues I had was that the html.I element doesn’t have an aria_hidden or ariaHidden attribute. However I found a workaround:

html.I(className='fa fa-power-off', **{'aria-hidden': 'true'}, children=None)

Another problem I had was that I mistakenly didn’t add the /fonts folder under assets, and only had the font-awesome.min.css. You need both (if you take a look at the css, it references the fonts folder).

Hey,
First of all thank you very much for your replies to almost every post in the community. It helps a lot.

Could you please help me with font awesome icon? I am trying to display icon in my sidebar followed by text. However, using the below structure leaves space between icon and text(twitter) because I use dbc.Col in both of them. How can I fix it to display my text right after the label without space between them

dbc.Row(
            [
                dbc.Col(html.I(className="fab fa-twitter")),
                dbc.Col("Twitter"),
                dbc.Col(
                    html.I(className="fas fa-chevron-down mr-3"), width="auto" 
                ),

            ],

            className="my-1",

@saboo.anuj17 Does setting no_gutters=True on the Row and width="auto" on all of the columns do what you want?

Hey, Thank. It worked the following way:

dbc.Row(    
            [
                dbc.Col(html.I(className="fab fa-twitter"),width="2"),
                dbc.Col("Twitter",width="7"),
                dbc.Col(
                    html.I(className="fas fa-chevron-down mr-2") 
                ),

            ],
            no_gutters=True,
            className="my-1",

Do I need to host the CSS somewhere, or reference the FA library? I am building a Dash app.

Thanks!