使用Font Awesome图标后font-family被修改问题的解决方法

Font Awesome的.fa基础类默认会给挂载元素强制设置图标专用的font-family属性，直接将该类添加在包裹菜单文字的<a>标签上时，会覆盖全站全局配置的Roboto字体继承规则，导致链接内文字显示异常。

注意：不要使用给<a>标签强制加font-family: Roboto !important的方案，该写法会导致图标元素也加载Roboto字体，直接无法正常渲染图标。

核心原则：图标与菜单文字拆分，使用独立内联标签承载Font Awesome类名，这是Font Awesome官方推荐的标准使用方式，不会干扰父元素的字体继承规则。

1. HTML结构调整 #

将原本直接加在<a>标签上的fa相关类，移动到<a>内部的独立<i>（或<span>）标签上，和菜单文字平级放置。其余菜单项如果暂时不需要加图标，直接删掉对应<i>标签即可，不影响原有显示效果。

<!-- 原错误写法 -->
<li><a class="fa fa-home" href="/index.html"> Inicio</a></li>

<!-- 修改后正确写法，其余菜单项加图标时都遵循这个结构 -->
<li><a href="/index.html"><i class="fa fa-home"></i> Inicio</a></li>

完整修改后的HTML代码：

<!--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"><i class="fa fa-home"></i> Inicio</a></li>
            <li><a href="#"><i class="fa fa-cog"></i> Configuracoes</a></li>
            <li><a href="#"><i class="fa fa-user"></i> Clientes</a></li>
            <li><a href="#"><i class="fa fa-truck"></i> Fornecedores</a></li>
            <li><a href="#"><i class="fa fa-box"></i> Produtos</a></li>
            <li><a href="#"><i class="fa fa-warehouse"></i> Estoque</a></li>
            <li><a href="#"><i class="fa fa-calendar"></i> Eventos</a></li>
            <li><a href="#"><i class="fa fa-file-text"></i> Relatórios Gerais</a></li>
            <li><a href="#"><i class="fa fa-file-invoice"></i> Nota Fiscal</a></li>
            <li><a href="#"><i class="fa fa-industry"></i> Produção</a></li>
            <li><a href="#"><i class="fa fa-shopping-cart"></i> Compras</a></li>
            <li><a href="#"><i class="fa fa-truck-fast"></i> Delivery/Encomendas</a></li>
            <li><a href="#"><i class="fa fa-coins"></i> Vendas</a></li>
            <li><a href="#"><i class="fa fa-wallet"></i> Financeiro</a></li>
            <li><a href="#"><i class="fa fa-download"></i> Downloads</a></li>
        </ul>

    </body>
</html>

2. CSS样式补充 #

给图标标签添加少量右侧外边距，避免图标和文字贴在一起，同时固定图标宽度保证所有菜单文字左对齐，在原有hpstyle.css中追加以下代码即可，原有全局Roboto字体配置无需修改，会自动被菜单文字继承。

#sidebar a .fa {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

完整CSS参考：

@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;
}

/* 图标间距与对齐样式 */
#sidebar a .fa {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

/* 鼠标悬停动画 */
#sidebar a:hover {
    background: #302f2f;
    color: rgb(255, 255, 255);
}

内容的提问来源于stack exchange，提问作者João Lucas da Silva