Cant show Font Awesome Icons in dash_trich_components's SideBar

Dash Python
1

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 (dash trich Components documentation):

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

2

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

Did you add the font awesome link on the external_stylesheets?

image
image845×125 16.5 KB

Let me know if it works for you.

3

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?

4

Give a try to the text_color argument.

image
image1126×624 54.5 KB

5

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.

7

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,'https://use.fontawesome.com/releases/v5.8.1/css/all.css'])

app.layout = html.Div([
    dtc.SideBar([
        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")
        
    ]),
    html.Div([
    ], id="page_content"),
])

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

8

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 https://use.fontawesome.com/releases/v6.1.1/css/all.css

1 Like
9

that worked thanks a lot