我正在使用w3.css css文件以及谷歌图标woff2文件来设计一个HTML页面，我还使用树莓派与python文件运行flask的web服务器，服务器正常运行，昨天一切看起来都很棒。今天我继续，似乎是HTML不能正确显示图标，除非我移动css代码为他们从css文件到HTML文件的样式元素内部。
其他一切从css文件仍然正常工作，如果我删除它的页面看起来非常错误，我很沮丧，试图找出我必须不小心改变到哪里大部分的css页面被正确链接，但部分指的图标只在HTML内工作…
任何帮助将非常感激，图标是唯一的事情没有正确显示，如果所有其他失败，我可以只是移动代码到我的HTML文件再次。我确信这是愚蠢和简单的，我会恨自己不能发现这样一个简单的错误。w3.css的大部分需要被删除，不要有太多的单词，顶部235行与网站外的文件完全相同，所以唯一有问题的css是在css代码的最底部，与w3css代码分开——编辑——这个网站做了一些奇怪的事情，将html文件中的样式元素与css文件
结合起来
a.custom-hover-color:hover {
background-color: transparent!important;
text-color: black!important;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
@media (max-width:1205px){.w3-auto{max-width:95%}}
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}<!DOCTYPE html>
<html lang="en" style="--app-height:px;" class>
<meta name="author" content="Travis Grudzinskas">
<title>Catbot</title>
<link rel="stylesheet" href="/static/style.css">
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<script src="/static/script.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale-1.0">
<meta name="description" content="Catbot, the popular bot for cats">
<link rel="icon" type="image/png" sizes="32x32" href="/static/catbot_black.png">
<meta name="theme-color" content="#121212">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Catbot">
<link rel="apple-touch-icon" sizes="180x180" href="/static/catbot_black.png">
<style></style>
<!--navigation-->
<div class="w3-top w3-bar w3-dark-gray">
<div class="w3-sidebar w3-bar-block w3-border-right w3-light-gray" style="display:none" id="mySidebar">
<button onclick="w3_close()" class="w3-bar-item w3-large w3-light-gray">Close ×</button>
<a href="#index.html" class="w3-bar-item w3-button">Dashboard</a>
<a href="#Recordings" class="w3-bar-item w3-button">Recordings</a>
<a href="#machine.html" class="w3-bar-item w3-button">Machine</a>
</div>
<div class="w3-left w3-hide-small">
<button class="w3-button w3-dark-gray w3-xlarge" onclick="w3_open()">☰</button>
<img class="w3-display-top-left w3-top w3-xlarge" href="/static/catbot_white.png">
</div>
<!--right sided nav links-->
<div class="w3-right w3-hide-small">
<a href="#notifications" class="w3-bar-item w3-button w3-xlarge"><i class="material-icons">flag</i></a>
<a href="#interface" class="w3-bar-item w3-button w3-xlarge"><i class="material-icons">settings</i></a>
<a href="#power" class="w3-bar-item w3-button w3-xlarge"><i class="material-icons">power_settings_new</i></a>
</div>
</div>
</div>
<body style="padding-top: 70px; background-color: #009688; text-align: center;">
<div class="w3-row">
<div class="w3-col s6 w3-center w3-text-white">
<h1>simulated position</h1>
<img src="/plot" alt="simulated position plot" width="49%">
</div>
<div class="w3-col s6 w3-center w3-text-white" style="text-align: center;">
<h1>Controls</h1>
<div class="w3-row" style="padding-top: 1%;">
<p>Sentient/Manual</p>
<h2><label class="switch"><input type="checkbox">
<span class="slider round"></span></label></h2>
</div>
<div class="w3-row">
<div class="w3-third s6 w3-center w3-text-white">
<p>counter-clockwise</p>
<p><a class="material-icons w3-button w3-round custom-hover-color" style="font-size: xxx-large">arrow_circle_left</a></p>
</div>
<div class="w3-third s6 w3-center w3-text-white">
<p>actuate</p>
<p><a class="material-icons w3-button w3-round custom-hover-color" style="font-size: xxx-large">pets</a></p>
</div>
<div class="w3-third s6 w3-center w3-text-white">
<p>clockwise</p>
<p><a class="material-icons w3-button w3-round custom-hover-color" style="font-size: xxx-large">arrow_circle_right</a></p>
</div>
</div>
</div>
</div>
<div class="w3-row" style="padding-top: 1%;">
<div class="w3-col s6 w3-center w3-text-white">
<h1>Console</h1>
</div>
<div id="cameras" class="w3-col s6 w3-center w3-text-white" style="text-align: center;">
<h1>Cameras</h1>
<video autoplay title="LiveStream" width="320" height="240" controls>
<source src="/static/Octopus.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
</body>
</html>我已经尝试完全重新下载css文件和重做图标的代码，认为它会修复任何错误，我不小心保存，但它没有工作
我把代码移到了"style"元素在html文件中，它确实使图标正常工作，所以图标文件的位置不是问题，我想清理html文件，并有更少的css如果可能的话，虽然
我已经扫描了我的代码，并把我的眼睛揪出来，希望血汗和眼泪会导致一些东西
通过CSS查看一个好主意可能是尝试删除一些，因为我认为冲突和专一性是问题的根源。例如，有三种不同的字体族声明:
我会尝试删除下面的缩小部分，看看是否解决了这个问题。就你所做的事情来说，这似乎是不必要的。
/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
如果你需要保留这个部分，我会把它移到CSS文件的顶部，以限制冲突。
你应该复制你需要的图标的直接路径，然后放入"file://"在那前面。因为我在你的代码中没有看到任何问题，我认为问题是计算机找到这些图标的路径。
交货。用户文件://C: jbrir 网站文件 图片 light.png