Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

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.