✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Cant show Font Awesome Icons in dash_trich_components's SideBar

HI!

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 (https://romanonatacha.github.io/dash_trich_components/):

dtc.SideBar([
         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.