After use an icon from fontawesome, it changes my font family-CodePudding

I'm trying to use icons inside my lateral menu but when i put the icon, the font-family changes.

theres a way to put an icon inside the bar, without changes the whole font-family?

<!--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  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);
}

Is there any way (example of code), that I can use so as to inherit the same font-family which is used in the webiste, after using a font awesome icon?

Thank you so much for your time.

CodePudding user response：

The icon should be in a separate <i> tag, e.g:

<a href="#"><i aria-hidden="true"></i>Inicio</a>

You're using your classes inside the <a> tag too:

<li><a href="/index.html"> Inicio</a></li>

Think of font-awesome as a separate entity. Check the docs for more info.

Here's a snippet:

<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<i  aria-hidden="true"></i>&nbsp; Inicio</a>