我试图在横向菜单中使用图标，但是当我放入图标时，字体族发生了变化。
这样的
有没有一种方法可以在不改变整个字体的情况下把一个图标放在栏内?<!--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);
}
是否有任何方法(代码的例子)，我可以使用，以便继承相同的字体家族，这是在网站上使用的，使用字体awesome图标后?
非常感谢您的宝贵时间。
图标应该在单独的<i>标签中，例如:
<a href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>Inicio</a>
您正在使用<a>标签内的类:
<li><a class="fa fa-home" href="/index.html"> Inicio</a></li>
将font-awesome视为一个单独的实体。查看文档获取更多信息。
这是一个片段:
<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<i class="fa fa-home fa-fw" aria-hidden="true"></i> Inicio</a>