Dash tabs with font awesome icon do not render properly depending on browser

Dash Python
1

Hi

I try to set fontawesome icons in dash labels. I follow this example and it works on several browsers.

Nevertheless, if I try to style a little bit the title, changing the font or font color for example it renders correctly in safari but neither in chrome nor in firefox. You can see that neither the icons render correctly nor the font which is serif family for the tab label on firefox and chrome.

Here is the result in safari:
safari

And theses are the results in chrome/firefox
chrome

firefox

The above screenshots are from the minimal example apps below. If you remove the css classes "custom-tab" or "custom-tab--selected" it works on all browser. It seems that using this custom css classes “remove” the use of the fontawseome fonts and thus the icons are not displayed correctly.

import dash
from dash import dcc, html

external_stylesheets = [
    "https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap",
    "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css",
]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

def make_a_tab(icon, title):
    return dcc.Tab(
        label=title, className=icon + " custom-tab",
        selected_className="custom-tab--selected",
        value=title.lower().replace(" ", "-"),
        children=[
            html.H3(title),
            html.P(f"This is the tab {title}."),
        ])

icons = ["fas fa-globe", "fas fa-chart-area", "fas fa-box"]
titles = ["Tab globe", "Tab chart", "Tab box"]

app.layout = html.Div(
    dcc.Tabs(
        [make_a_tab(icon, title) for icon, title in zip(icons, titles)],
        value="tab-globe",
    )
)

if __name__ == '__main__':
    app.run_server(debug=True, host='127.0.0.1')

With a css file in assets/css/custom.css which is:

body {
    font-family: "Ubuntu", sans-serif;
}

.custom-tab {
    color:  #7F7F7F;
    font-size: large;
    padding: 10px 25px !important;
    font-weight: normal;
}

.custom-tab--selected {
    font-size: large;
    padding: 10px 25px !important;
    border-top: 2px solid #3c6382 !important;
    color:  #3c6382 !important;
    font-weight: 600;
}

Thank you for any help