# Cant show Font Awesome Icons in dash\_trich\_components's SideBar **URL:** \ **Category:** Dash Python\ **Created:** [October 22, 2020, 11:11am UTC](https://community.plotly.com/t/cant-show-font-awesome-icons-in-dash-trich-componentss-sidebar/46354 "2020-10-22T11:11:10Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![agarzon](https://avatars.discourse-cdn.com/v4/letter/a/838e76/32.png) [@agarzon](https://community.plotly.com/u/agarzon)\ **Post date:** [October 22, 2020, 11:11am UTC](https://community.plotly.com/t/cant-show-font-awesome-icons-in-dash-trich-componentss-sidebar/46354/1 "2020-10-22T11:11:10Z")
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](https://romanonatacha.github.io/dash_trich_components/)): ```auto 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: ```auto 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 ---
**Author:** ![kabure](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/kabure/32/19351_2.png) [@kabure](https://community.plotly.com/u/kabure)\ **Post date:** [October 22, 2020, 1:47pm UTC](https://community.plotly.com/t/cant-show-font-awesome-icons-in-dash-trich-componentss-sidebar/46354/2 "2020-10-22T13:47:57Z")
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/913d4fc9ccf4a6f9d3ca67e02cd284f145ede9d8.png) Let me know if it works for you. ---
**Author:** ![agarzon](https://avatars.discourse-cdn.com/v4/letter/a/838e76/32.png) [@agarzon](https://community.plotly.com/u/agarzon)\ **Post date:** [October 22, 2020, 2:35pm UTC](https://community.plotly.com/t/cant-show-font-awesome-icons-in-dash-trich-componentss-sidebar/46354/3 "2020-10-22T14:35:49Z")
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? ---
**Author:** ![kabure](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/kabure/32/19351_2.png) [@kabure](https://community.plotly.com/u/kabure)\ **Post date:** [October 22, 2020, 5:01pm UTC](https://community.plotly.com/t/cant-show-font-awesome-icons-in-dash-trich-componentss-sidebar/46354/4 "2020-10-22T17:01:25Z")
Give a try to the text\_color argument. ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/7/73d1a0d12e6096cad2f757859ef926fc04c5087e.png) ---
**Author:** ![agarzon](https://avatars.discourse-cdn.com/v4/letter/a/838e76/32.png) [@agarzon](https://community.plotly.com/u/agarzon)\ **Post date:** [October 23, 2020, 7:20am UTC](https://community.plotly.com/t/cant-show-font-awesome-icons-in-dash-trich-componentss-sidebar/46354/5 "2020-10-23T07:20:41Z")
As I show in my first post I’m using it, but doesn’t work ☹ For that reason I’m trying to find a workaround with CSS. ---
**Author:** ![chedi](https://avatars.discourse-cdn.com/v4/letter/c/7c8e57/32.png) [@chedi](https://community.plotly.com/u/chedi)\ **Post date:** [July 12, 2022, 6:08am UTC](https://community.plotly.com/t/cant-show-font-awesome-icons-in-dash-trich-componentss-sidebar/46354/7 "2022-07-12T06:08:57Z")
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 ? ```auto 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 ---
**Author:** ![yanboe](https://avatars.discourse-cdn.com/v4/letter/y/a6a055/32.png) [@yanboe](https://community.plotly.com/u/yanboe)\ **Post date:** [July 12, 2022, 6:42am UTC](https://community.plotly.com/t/cant-show-font-awesome-icons-in-dash-trich-componentss-sidebar/46354/8 "2022-07-12T06:42:28Z")
cloud-arrow-up doesn’t exist in v5.8.1: [Search v5 Icons | Font Awesome](https://fontawesome.com/v5/search?q=cloud-arrow-up) It exists in v6: [Search v6 Icons | Font Awesome](https://fontawesome.com/v6/search?q=cloud-arrow-up) So just upgrade your fontawesome link to `https://use.fontawesome.com/releases/v6.1.1/css/all.css` ---
**Author:** ![chedi](https://avatars.discourse-cdn.com/v4/letter/c/7c8e57/32.png) [@chedi](https://community.plotly.com/u/chedi)\ **Post date:** [July 12, 2022, 6:55am UTC](https://community.plotly.com/t/cant-show-font-awesome-icons-in-dash-trich-componentss-sidebar/46354/9 "2022-07-12T06:55:19Z")
> [@yanboe](#): > > [https://use.fontawesome.com/releases/v6.1.1/css/all.css](https://use.fontawesome.com/releases/v6.1.1/css/all.css) that worked thanks a lot