Cant show Font Awesome Icons in dash_trich_components's SideBar


I’ve just discovered the library dash_trich_component and trying to use a Sidebar instead of a BarTab. However, I can’t show Font Awesome icons.

This is the use example in the documentation (dash trich Components documentation):

         dtc.SideBarItem(id='id_1', label="Label 1", icon="fas fa-home"),
         dtc.SideBarItem(id='id_2', label="Label 2", icon="fas fa-chart-line"),
         dtc.SideBarItem(id='id_3', label="Label 3", icon="far fa-list-alt"),
         dtc.SideBarItem(id='id_4', label="Label 4", icon="fas fa-info-circle"),
         dtc.SideBarItem(id='id_5', label="Label 5", icon="fas fa-cog"),

I’m doing the following:

dic_tabs = {'general': {'label': 'label 1',   'icon': 'fas fa-home'},
            'individ': {'label': 'label 2',   'icon': 'fas fa-vial'},
            'distr':   {'label': 'label 3',   'icon': 'fas fa-code-branch'},
            'reporte': {'label': 'label 4',   'icon': 'fas fa-file-chart-line'},
            'update':  {'label': 'label 5',   'icon': 'fas fa-edit'},
            'options': {'label': 'label 6',   'icon': 'fas fa-recycle'}}

dtc.SideBar([dtc.SideBarItem(id       = k,
                             label    = v['label'],
                             icon     = v['icon'],
                             n_clicks = 0
                                for k, v in dic_tabs.items()
            id         = 'tabs-options',
            bg_color   = '#b7cbed',
            text_color = '#404040'

The sidebar is shown correctly (except text_color, but that isn’t important to me), but the icons are not shown.

Thanks you very much in advance!

@chriddyp @kabure @romanonatacha

Hey, @agarzon we are very glad that you’re using the sidebar component.

Did you add the font awesome link on the external_stylesheets?

Let me know if it works for you.

Hi @kabure

Thanks you very much, that fix my problem.

Now, I’m trying to change the color of the icons via CSS, but no way.

Is there any way of do it?

Give a try to the text_color argument.

As I show in my first post I’m using it, but doesn’t work :frowning:

For that reason I’m trying to find a workaround with CSS.

The only icons that show up for me are the ones that were given as a default in the sample code. No other icon works from fontawesome . What could cause this ?

app = dash.Dash(__name__, external_stylesheets =[dbc.themes.BOOTSTRAP,''])

app.layout = html.Div([
        dtc.SideBarItem(id='id_1', label="CReport", icon="fas fa-cloud-arrow-up"),
        dtc.SideBarItem(id='id_2', label="ZReport", icon="fas fa-chart-line")
    ], id="page_content"),

It shows up for chart-line but not for cloud-arrow-up

cloud-arrow-up doesn’t exist in v5.8.1: Search v5 Icons | Font Awesome

It exists in v6: Search v6 Icons | Font Awesome

So just upgrade your fontawesome link to

1 Like

that worked thanks a lot