Prevent local static css file from having header Content-Type:text/plain

[warfl0p]

My app is ran locally.

github repo: https://github.com/warfl0p/Finance_dashboard_streamlit
(the issue I’m having here is in the file app/pages/1_month.py)
error message: Refused to apply style from http://localhost:8501/app/static/fontawesome-free-6.5.1-web/css/all.min.css’ because its MIME type (‘text/plain’) is not a supported stylesheet MIME type, and strict MIME checking is enabled

streamlit version: 1.29.0
python version: 3.12.1

So my goal is making a button with a costum icon as text. I have succesfully made this with the following code:

st.markdown(
            '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>',
            unsafe_allow_html=True,
        )
with stylable_container(
            key="container_with_border",
            css_styles=r"""
            button div:before {
                font-family: 'Font Awesome 6 Free';
                content: '\f054';
                display: inline-block;
                padding-right: 3px;
                vertical-align: bottom;
                font-weight: 900;
                border-radius:20px;
            }
            """,
        ):
            st.button("")

Though, i dont want to use a cdn, so i installed everything necessary and referenced to all.min.css instead of the link in href. When doing so, I get 404 message if I inspect the page, so it cant find the path to the css file. After some searching I found I had to use the static folder in the app, and I did so. This changed the error to
Refused to apply style from http://localhost:8501/app/static/fontawesome-free-6.5.1-web/css/all.min.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I assume this is because of what is described here Static file serving - Streamlit Docs. More specifically "Any other file will be sent with header Content-Type:text/plain ". I have tried inserting files with the supported formats, like jpg, and this did work.

Now my question is how do I make this work without a cdn? Can I force an other content-type? Or can i make it find the path outside of the static folder?

[sahirmaharaj]

Hello @warfl0p,

1. One approach to serve files with the correct MIME type is to use a custom server setup or middleware that can serve your static files with the correct headers. This can be a bit complex, as it involves setting up an additional component in your stack

2. Another, more straightforward approach could be to embed the CSS directly in your Streamlit app. This is less elegant than linking to an external CSS file but can be a practical workaround. You’ve already used st.markdown to include a link tag; similarly, you can include a <style> tag with your CSS:

css_content = """ /* Entire content of your all.min.css*/ """
st.markdown(f'<style>{css_content}</style>', unsafe_allow_html=True)

3. Alternatively, you can run a local HTTP server that serves your static files (like your CSS) with the correct MIME types.

st.markdown('<link rel="stylesheet" href="http://localhost:8000/path/to/all.min.css"/>', unsafe_allow_html=True)

Let me know if you might require any further assistance!

Kind Regards,
Sahir

P.S. Lets connect on LinkedIn!