我试图在侧边菜单中使用图标，但当我放置图标时，字体系列会发生变化.
有没有一种方法可以在不改变整个字体系列的情况下，将图标放在工具栏内？
<!--Programmed by: João Lucas-->
<!--started in: 20220713 05:00am -->
<!--Last edit: 20220713 07:22am-->
<!--version: 1.0-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home Page</title>
<script src="https://kit.fontawesome.com/d24d1f29c0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="hpstyle.css">
</head>
<body>
<ul id="sidebar">
<div id="imgsidebar">
<img src="logo_main.png" id="logosidebar">
</div>
<li><a class="fa fa-home" href="/index.html"> Inicio</a></li>
<li><a href="#"> Configuracoes</a></li>
<li><a href="#"> Clientes</a></li>
<li><a href="#"> Fornecedores</a></li>
<li><a href="#"> Produtos</a></li>
<li><a href="#"> Estoque</a></li>
<li><a href="#"> Eventos</a></li>
<li><a href="#"> Relatórios Gerais</a></li>
<li><a href="#"> Nota Fiscal</a></li>
<li><a href="#"> Produção</a></li>
<li><a href="#"> Compras</a></li>
<li><a href="#"> Delivery/Encomendas</a></li>
<li><a href="#"> Vendas</a></li>
<li><a href="#"> Financeiro</a></li>
<li><a href="#"> Downloads</a></li>
</ul>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
color: #000;
font-size: 14px;
background-color: #111;
font-family: roboto;
}
#sidebar {
width: 200px;
margin: 10px; padding: 0;
background: #222;
list-style-type: none;
border-radius: 4px;
height:900px;
}
#imgsidebar{
display: flex;
justify-content: center;
padding: 12px;
}
#sidebar a {
color: #666;
text-decoration: none;
padding: 10px;
display: block;
}
/* animação quando passa o mouse */
#sidebar a:hover {
background: #302f2f;
color: rgb(255, 255, 255);
}
在使用了一个很棒的字体图标之后，有没有什么方法(代码示例)可以用来继承webiste中使用的相同字体系列？
非常感谢您抽出时间.