How to use two styles for one tab label?

Dash Python
1

Hi experts,

I’m trying to implement font-awesome for my tab label.

Initially it goes well:

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

)

image

However I’d like to add some styles to remove the blue border and set the width/height/etc.

    dcc.Tab(
        label='Analysis',
        className="fas fa-bar-chart",
        style={
            "background-color": "#5c5c5c",
            "color": "#ffffff",
            "box-shadow": "none",
            "-webkit-box-shadow": "none",
            "border-color": "inherit",
            "font-family": "Verdana",
            "font-size": "12",
            "width": "225",
            "height": "37.66",
            "text-align": "center",
            "vertical-align": "middle"
        },
        selected_style={
            "background-color": "#303030",
            "color": "#ffffff !important",
            "box-shadow": "none",
            "-webkit-box-shadow": "none",
            "border-color": "inherit",
            "font-family": "Verdana",
            "font-size": "12",
            "width": "225",
            "height": "37.66",
            "text-align": "center",
            "vertical-align": "middle"
        },
  )

Now it doesn’t work at all:

image

2

One more question, why doesn’t the following work?

3

I figured out the second question, you have to use

"align-items": "center"

4

OK I figured out the primary problem, it’s a conflict of

"font-family": "Verdana"

with Font-Awesome. Damn I was stupid.