[Python] Font Awesome isn’t displaying the icon

I'm working on a simple Flask app that renders an HTML page with Font Awesome icons. I've included the Font Awesome CDN in the , and while the background styles and layout appear correctly, the icons themselves are not showing—only the background color is visible.

I've tried different icon names, confirmed the link is loading, and inspected the elements, but can't figure out what’s wrong.

Any help pointing out where the issue might be would be greatly appreciated!

Here’s my code:

from flask import Flask, render_template_string, url_for

app = Flask(__name__)

@app.route('/')
def home():
html = '''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radiology IT Request</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-/+aY3Ojf2NvYfJpUzYvDgYm6ujVO5j9OfH0MSQACIp2swzKH7YECYPJr6nW+z5rHKL9oOmDnJ+6Hb2VDRzH59Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body {
background-color: #000100;
font-family: Arial, sans-serif;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
padding-top: 70px;
box-sizing: border-box;
}

.tab-header {
background-color: #454545;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 10px 20px;
gap: 15px;
}

.tab-header img {
height: 45px;
width: auto;
margin-right: 10px;
}

.tab-header a {
color: gray;
text-decoration: none;
font-size: 16px;
padding: 6px 10px;
border-radius: 4px;
transition: background-color 0.3s ease;
}

.tab-header a:hover {
background-color: #ddd;
color: black;
}

.tab-header-Icon {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #454545;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.tab-header-Icon i {
font-size: 30px;
color: #00bfff;
}

.box {
background-color: white;
padding: 30px;
width: 90%;
max-width: 350px;
border: 2px solid #007BFF;
border-radius: 10px;
color: #000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
text-align: center;
}

h1 {
color: #007BFF;
}
</style>
</head>
<body>
<div class="tab-header">
<img src="{{ url_for('static', filename='logo3.png') }}" alt="Logo">
<a href="#">Home</a>
<a href="#">Activities</a>
<a href="#">Requests</a>
<a href="#">Solutions</a>
<a href="#">Maintenance</a>
<a href="#">Reports</a>
</div>
<a href="#" class="tab-header-Icon">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
<div class="box">
<h1>Please Submit Your IT Request</h1>
<p>Thank you for your submission!</p>
</div>
</body>
</html>
'''
return render_template_string(html)

if __name__ == '__main__':
app.run(debug=True)

Continue reading...