使用Font Awesome添加菜单图标时如何避免修改文本字体？

问题原因 #

你直接把Font Awesome的类（fa-solid fa-pen-to-square）加到了<a>标签上，而Font Awesome的核心样式会强制给带有这些类的元素设置字体为Font Awesome 6 Free，这就导致标签内的"Novo Pedido"文本也继承了这个字体，和其他菜单文本的字体不一致。

修正方案 #

不要将Font Awesome类应用到<a>标签本身，而是在<a>内部用单独的<i>或<span>标签承载图标类，这样文本会保持原有字体，图标也能正常显示。

修正后的代码：

<div class="sidebar-heading">
  <a href="?page=home">
    <img src="SGIE/HOME2.png">
  </a>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <a href="?page=novo">
    <i class="fa-solid fa-pen-to-square"></i> Novo Pedido
  </a>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <a href="?page=listar">Equipamentos em Reparação</a>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <a href="?page=listarr">Equipamentos Reparados</a>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <a href="?page=entregues">Equipamentos Entregues</a>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <a href="?page=admin">Admin</a>
</div>

额外优化建议 #

• 别用 做间距，建议用CSS的margin或padding控制菜单元素的间距，更灵活易维护。比如给每个<a>标签加类，设置margin-right: 20px;（数值按需调整）。
• 如果要让图标和文本对齐更美观，可给承载图标的<i>标签加CSS样式：vertical-align: middle;，让图标和文本居中对齐。

示例CSS：

.sidebar-heading a {
  margin-right: 2rem; /* 替换多个 的间距 */
  text-decoration: none; /* 按需去掉下划线 */
}
.sidebar-heading a i {
  vertical-align: middle;
  margin-right: 0.5rem; /* 图标和文本之间的间距 */
}

内容的提问来源于stack exchange，提问作者Petersteve