# Anyone got font-awesome fonts displayable within Dash?

**URL:** <https://community.plotly.com/t/anyone-got-font-awesome-fonts-displayable-within-dash/5960>\
**Category:** Dash Python\
**Created:** [September 26, 2017, 6:56pm UTC](https://community.plotly.com/t/anyone-got-font-awesome-fonts-displayable-within-dash/5960 "2017-09-26T18:56:38Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![IanWaring](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/ianwaring/32/1834_2.png) [@IanWaring](https://community.plotly.com/u/IanWaring)\
**Post date:** [September 26, 2017, 6:56pm UTC](https://community.plotly.com/t/anyone-got-font-awesome-fonts-displayable-within-dash/5960/1 "2017-09-26T18:56:38Z")

</div>

Just wondering if there’s an html.i() method to invoke

‘’’\<i class="fa fa-camera-retro fa-lg\>’’’

or similar. I can’t find any docs on the core or html components (yet)…

Ian W.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [September 26, 2017, 9:41pm UTC](https://community.plotly.com/t/anyone-got-font-awesome-fonts-displayable-within-dash/5960/2 "2017-09-26T21:41:49Z")

</div>

All of the html attributes _should_ be available inside the `html` package in upper case form.  
So instead of `<div/>` it’s `html.Div`. In this case, instead of `<i/>` it’s `html.I`.  
The other exception is that instead of `class` it’s `className`. Learn more about this in [https://plot.ly/dash/dash-html-components](https://plot.ly/dash/dash-html-components)

So, in this case, you should be able to specify an icon with

```auto
html.I(className="fa fa-camera-retro fa-lg")

```

---

<div class="post-metadata">

**Author:** ![IanWaring](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/ianwaring/32/1834_2.png) [@IanWaring](https://community.plotly.com/u/IanWaring)\
**Post date:** [September 26, 2017, 9:53pm UTC](https://community.plotly.com/t/anyone-got-font-awesome-fonts-displayable-within-dash/5960/3 "2017-09-26T21:53:55Z")

</div>

That’s magic. Thank you.

---

<div class="post-metadata">

**Author:** ![markus\_zhang](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@markus\_zhang](https://community.plotly.com/u/markus_zhang)\
**Post date:** [March 16, 2019, 10:55pm UTC](https://community.plotly.com/t/anyone-got-font-awesome-fonts-displayable-within-dash/5960/4 "2019-03-16T22:55:16Z")

</div>

Hi, chriddyp, thanks for the reply. I’m trying to do the same in Dash Tab but fails to show up:

```
    dcc.Tab(
        className=html.I(className="fas fa-chart-bar"),
        label="Analysis",

```

However this works:

```
    dcc.Tab(
        className="fas fa-chart-bar",
        label="Analysis",

```

But there is a big problem with the second approach. Font Awesome has some fixed width icons, e.g. fa-fw and from what I see in the tutorials, e.g. here:  
[https://fontawesome.com/v4.7.0/examples/](https://fontawesome.com/v4.7.0/examples/)  
We only need to write something like

```
    dcc.Tab(
        className="fas fa-chart-bar fa-fw",
        label="Analysis",

```

to separate the FA icons and “Analysis”. Somehow I can’t do this in Dash, not sure what could be the problem? Thanks

---

<div class="post-metadata">

**Author:** ![mathybit](https://avatars.discourse-cdn.com/v4/letter/m/c5a1d2/32.png) [@mathybit](https://community.plotly.com/u/mathybit)\
**Post date:** [June 18, 2019, 2:55pm UTC](https://community.plotly.com/t/anyone-got-font-awesome-fonts-displayable-within-dash/5960/5 "2019-06-18T14:55:26Z")

</div>

I was able to get this working. The HTML for the power-off icon is:

```auto
<i class="fa fa-power-off" aria-hidden="true"></i>

```

One of the issues I had was that the html.I element doesn’t have an aria\_hidden or ariaHidden attribute. However I found a workaround:

```auto
html.I(className='fa fa-power-off', **{'aria-hidden': 'true'}, children=None)

```

Another problem I had was that I mistakenly didn’t add the /fonts folder under assets, and only had the font-awesome.min.css. You need both (if you take a look at the css, it references the fonts folder).

---

<div class="post-metadata">

**Author:** ![saboo.anuj17](https://avatars.discourse-cdn.com/v4/letter/s/278dde/32.png) [@saboo.anuj17](https://community.plotly.com/u/saboo.anuj17)\
**Post date:** [December 4, 2019, 9:01am UTC](https://community.plotly.com/t/anyone-got-font-awesome-fonts-displayable-within-dash/5960/6 "2019-12-04T09:01:40Z")

</div>

Hey,  
First of all thank you very much for your replies to almost every post in the community. It helps a lot.

Could you please help me with font awesome icon? I am trying to display icon in my sidebar followed by text. However, using the below structure leaves space between icon and text(twitter) because I use dbc.Col in both of them. How can I fix it to display my text right after the label without space between them

```auto
dbc.Row(
            [
                dbc.Col(html.I(className="fab fa-twitter")),
                dbc.Col("Twitter"),
                dbc.Col(
                    html.I(className="fas fa-chevron-down mr-3"), width="auto" 
                ),

            ],

            className="my-1",
```

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [December 4, 2019, 9:57am UTC](https://community.plotly.com/t/anyone-got-font-awesome-fonts-displayable-within-dash/5960/7 "2019-12-04T09:57:18Z")

</div>

@saboo.anuj17 Does setting `no_gutters=True` on the `Row` and `width="auto"` on all of the columns do what you want?

---

<div class="post-metadata">

**Author:** ![saboo.anuj17](https://avatars.discourse-cdn.com/v4/letter/s/278dde/32.png) [@saboo.anuj17](https://community.plotly.com/u/saboo.anuj17)\
**Post date:** [December 4, 2019, 6:58pm UTC](https://community.plotly.com/t/anyone-got-font-awesome-fonts-displayable-within-dash/5960/8 "2019-12-04T18:58:53Z")

</div>

Hey, Thank. It worked the following way:

```auto
dbc.Row(    
            [
                dbc.Col(html.I(className="fab fa-twitter"),width="2"),
                dbc.Col("Twitter",width="7"),
                dbc.Col(
                    html.I(className="fas fa-chevron-down mr-2") 
                ),

            ],
            no_gutters=True,
            className="my-1",
```

---

<div class="post-metadata">

**Author:** ![cmwetherell](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/cmwetherell/32/13088_2.png) [@cmwetherell](https://community.plotly.com/u/cmwetherell)\
**Post date:** [October 27, 2020, 3:28am UTC](https://community.plotly.com/t/anyone-got-font-awesome-fonts-displayable-within-dash/5960/9 "2020-10-27T03:28:54Z")

</div>

Do I need to host the CSS somewhere, or reference the FA library? I am building a Dash app.

Thanks!

---

<div class="post-metadata">

**Author:** ![HashRocketSyntax](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/hashrocketsyntax/32/8972_2.png) [@HashRocketSyntax](https://community.plotly.com/u/HashRocketSyntax)\
**Post date:** [July 8, 2022, 1:33pm UTC](https://community.plotly.com/t/anyone-got-font-awesome-fonts-displayable-within-dash/5960/10 "2022-07-08T13:33:33Z")

</div>

> **[GitHub - snehilvj/dash-iconify: Iconify for Plotly Dash](https://github.com/snehilvj/dash-iconify)**
>
> Iconify for Plotly Dash. Contribute to snehilvj/dash-iconify development by creating an account on GitHub.

supports font-awesome and many others. no config:cdn/stylesheet needed

![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/b/7/b743e5121dd7de10fe06e519f7c2e8d492b24265.png)

🤯