Anyone got font-awesome fonts displayable within Dash?

Dash Python
1

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.

2

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")
3

That’s magic. Thank you.

1 Like
4

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

5

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

6

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",
7

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

8

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",
9

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

Thanks!

10

supports font-awesome and many others. no config:cdn/stylesheet needed

image

:exploding_head:

1 Like