How to Add Font Icons with Stylesheet to Dash

Dash Python
1

@nedned thanks for the link to your project. This will be very useful! I’ve been wrestling with how to integrate font icons into my dashboard app. I’ve appended a CSS file using the

“app.css.append_css({‘external_url’: ‘hrrps:// rawgit.com/…’})”

command. I’ve put the icon font files into the same folder as the css. When I try to access the icon file as per the code below, I get a little box displayed but no icon. In my case I’m using the themify font family. The path in the themify-icons.css points to the location of the icons. Am I missing a step?

                html.Div(
                    html.Div(
                        [html.I(className='ti-server')],
                        style={'font-size':'3em','min-height':'64px','color':'#F3BB45','text-align':'center'}
                    ),
                    style={'width':'41.6667%','float':'left','postion':'relative','min-height':'1px', 'padding-right':'15px', 'padding-left':'15px'}),
2

First thing to do would be double check that the CSS file is being loaded by the client correctly (note that the snippet adding the CSS file you pasted begins with ‘hrrps’ rather than ‘https’). Open the dev tools (F12) and navigate to the Network tab then reload the page. Look for the request that corresponds to the CSS file and check that the status code is 200.

Based on the icon name, I’m guessing you’re using themify icons (which I’ve not used before). According to the readme they’re added with a <span> tag rather than an <i> tag, so you probably want to change that also.

3

@nedned Thanks, it works! My issue seemed to be with the path in the CSS file to where the icons were stored. The Themify icons worked with the tag. Thanks so much for your reply.

1 Like