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

Question

所以我正在写一个个人网站来帮助我自己学习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页面的Jekyll "Minimal“主题)

Answer 1

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

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

Answer 2

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

因此，在这种情况下，您可以使用如下代码：

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