在 html <a> 标签中使用图标和文本，如何更改文本字体？答案

【问题标题】：Using icon and text in html <a> tag, how do I change the text font?在 html <a> 标签中使用图标和文本，如何更改文本字体？
【发布时间】：2020-11-22 23:06:07
【问题描述】：

所以我正在编写一个个人网站来帮助自己学习 html 和 css，作为其中的一部分，我正在尝试放置一些联系链接。对于这些，我希望他们有一个图标和文本。我正在使用字体真棒图标来实现这一点。截至目前，我的链接工作正常，但由于某种原因，链接中的文本是衬线字体，而我网站的其余部分是无衬线字体。此外，链接中的一个是不断加粗的，当它只应该在悬停时加粗。这就是它的样子（添加框以保护我的信息）：

Screenshot from webpage

这是我的 HTML 和相关的 CSS 代码：

    a {
      color:#263fb9;
      text-decoration:none;
      font-family: "Noto Sans", Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
      }

    a:hover, a:focus {
      color:#111e5c;
      font-weight: bold;
      }

    .fa {
      padding: 20px;
      font-size: 30px;
      width: 30px;
      text-align: center;
      text-decoration: none;
      border-radius: 50%;
      font-family: "Noto Sans", Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
      }

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <a href="mailto:EMAIL ADDRESS" class="fas fa-envelope" > EMAIL ADDRESS</a>
        
    <a href="https://twitter.com/HANDLE" class="fab fa-twitter" > HANDLE</a>

（注意：所有这些都改编自 github pages 中的 Jekyll “Minimal”主题）

【问题讨论】：

标签： html css

【解决方案1】：

不要将fa 类添加到 a 标签，使用额外的元素：

<a href="mailto:EMAIL ADDRESS" class="" > <span class="fas fa-envelope"></span> EMAIL ADDRESS</a>

【讨论】：

嗨！太感谢了！这解决了字体问题，但现在图标本身没有出现（它们只是小盒子）。任何想法？编辑：没关系！那是因为我在其他地方搞砸了其他事情！谢谢！

【解决方案2】：

在这种情况下，您的问题是您添加到链接的类（FontAwesome 类）最终会修改元素的字体系列定义。

所以，在这种情况下你可以做的是使用这样的东西：

<a href="https://twitter.com/HANDLE"><i class="fas fa-envelope"></i> HANDLE</a>

【讨论】：