Я пытаюсь отобразить флажок в html, но он не отображается. Флажок не отображается в chrome или Microsoft Edge. Все остальное работает нормально. Я использую flask, jinja и Materialize CSS, ссылка: https://materializecss.com/. Я также использую значки Google вместе со своей таблицей стилей. Ниже я помещаю html и css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Google Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="./static/styles.css">
</head>
<body>
<div>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<script type="text/javascript">
M.toast({html: '<span>{{ message }}</span><button class="btn-flat toast-action" style="color: white;" onclick="M.Toast.dismissAll();">X</button>', classes: 'rounded'})
</script>
{% endfor %}
{% endif %}
{% endwith %}
</div>
<div class="header">
<span class="text-font">
<span style="font-size:4vw; line-height: 0.5vw;" class="margin">Welcome {{ first_name }}</span>
<a href="/change_data"><i class="material-icons prefix" style="font-size: 2.4vw; color: white;">settings</i></a>
<br>
<span class="margin" style="font-size: 1.75vw;"><a href="/logout" style="text-decoration:none;">Logout</a></span>
</span>
</div>
<div class="text-font" style="margin-top: 4vw; text-align: center;">
<div style="display: inline-block; width: 30vw; text-align: center; border: 1px solid black; border-radius: 0.5vw; padding: 3vw;">
<p>First Name: {{ first_name }}</p>
<p>Last Name: {{ last_name }}</p>
<p>Email: {{ email }}</p>
</div>
</div>
<form>
<input type="checkbox" class="filled-in">
</form>
<div class="footer">
<span style="position: absolute; bottom: 0; right: 0; width: 100%; text-align:right; margin-right: 1vw; margin-bottom: 0.5vw" class="text-font">
The Login System
</span>
</div>
</body>
</html>
.header {
background-color: #2e4e4d;
color: white;
padding-top: 40px;
padding-bottom: 20px;
/*margin: 0 !important;*/
}
.text-font{
font-family: 'Courier New';
font-weight: bold;
}
.margin {
margin-left: 10%;
}
.footer {
color: white;
position:fixed;
left:0px;
bottom:0px;
height:10px;
width:100%;
background:#2e4e4d;
z-index: 100;
padding-top: 20px;
padding-bottom: 20px;
}
.stylingform {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
border-radius: 5px;
}
Кстати, если я нажму Shift-Ctrl-I в chrome и go для консоли, ошибок нет ( кроме отсутствия значка).