Vertically centering FontAwesome icons in a cell of a datatable

Hi all,

How do I vertically center FontAwesome icons in a cell of a datatable? My datatable is styled in a way where text will be centered vertically. However, FontAwesome icons are not following the styling rules. I’ve tried playing around with CSS (I’m not too knowledgeable on CSS) and I could not get it to work properly. A screenshot of the issue and the simplified code is below:

table = dash_table.DataTable(
        'textAlign': 'left',
        'backgroundColor': 'rgb(235, 235, 235)',
        'color': 'black',
        'fontWeight': 'bold',
        'height': '45px',
        'whiteSpace': 'normal'
        'textAlign': 'center',
        'whiteSpace': 'normal',
        'height': '55px',
        'lineHeight': '13px',
    markdown_options={"html": True},
    sort_by=[{'column_id': 'Rank', 'direction':'asc'}],
    fixed_columns={'headers': True, 'data': 1},
    fixed_rows={'headers': True, 'data': 0},
    style_table={'minWidth': '100%', 'minHeight': '750px', 'height': '750px', 'maxHeight': '750px', 'overflowY': 'auto'},

Any help would be greatly appreciated!

Hello @awesomefeathers,

When you add font awesome, it adds a :before psuedo class, that is why it is displaying above where it should be.

What you can try is:

.dash-table tr td {
     display: flex;
     justify-content: center;
     align-items: center;

This will apply to all that doesnt have styles applied directly to them.

1 Like

Actually, that was wrong, here is something different you can try:

.cell-markdown > p {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;

Font awesome icons are housed inside of a paragraph. These are placed inside of a div with class cell-markdown.

Edit: another thing of note, the font-size property will need to be the same for both the text in the fields and the icons to make them line up exactly:


Font size of 15pt applied to the whole body.

from dash import Dash, html, dash_table
import pandas as pd


clouds = '<i class="fa fa-cloud" style="color: grey;"></i>'
rain = '<i class="fa fa-cloud-rain"></i>'
sun = '<i class="fa fa-sun" style="color: gold;"></i>'

app = Dash(__name__, external_stylesheets=[FONT_AWESOME])

df = pd.DataFrame(
            ("temperature", [13, 43, 50]),
            ("city", ["NYC", "Paris", "Seattle"]),
            ("icon", [sun, clouds, rain]),

app.layout = html.Div(
            css=[dict(selector="p", rule="margin: 0px;")],
                {"id": "city", "name": "City"},
                {"id": "temperature", "name": "Temperature"},
                {"id": "icon", "name": "", "presentation": "markdown"},
            markdown_options={"html": True},
            style_table={"width": 200},
            style_data={'height': 50}

if __name__ == "__main__":

Thank you @jinnyzor, the css code you provided solves my problem!

As an aside, something I noticed is that after including the css code is that the cells with the FontAwesome icons can be “scrolled”, meaning that when I am scrolling down the table with a touchpad I can scroll each individual cell that has an icon and the scroll bar appears. This functionality does not exist in other cells without FontAwesome icons. Is there a way to remove this functionality of “scrolling” inside cells with icons? A snapshot of the issue is attached:


1 Like


I think it is just:

overflowY: hidden


overflow-y: hidden
1 Like

Cheers @jinnyzor, I added that into the style_data dict and it works perfectly.

Thanks again for your help, being a CSS noob this was really helpful.

1 Like