Как изменить шрифт текста с помощью значка и текста в теге html <a>?

Question

Итак, я пишу личный веб-сайт, чтобы помочь себе выучить html и css, и как часть этого я пытаюсь добавить некоторые контактные ссылки. Для них я хочу, чтобы у них был значок и текст. Для этого я использую иконки font awesome. На данный момент ссылки работают правильно, но по какой-то причине текст в ссылках является шрифтом с засечками, тогда как остальная часть моего сайта - шрифт без засечек. Кроме того, одна из ссылок постоянно выделяется жирным шрифтом, в то время как она должна быть жирной только при наведении курсора. Вот как это выглядит (поля добавлены для защиты моей информации):

Скриншот с веб-страницы

Вот мой 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>

(Примечание: все это было адаптировано из темы Jekyll "Minimal" со страниц github)

Answer 1

Ваша проблема в этом случае заключается в том, что классы, которые вы добавляете в свою ссылку (классы FontAwesome), в конечном итоге изменяют определение вашего семейства шрифтов для элемента.

Итак, что вы могли бы сделать в этом случае используется что-то вроде этого:

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

Answer 2

Не добавляйте класс fa к тегу a, используйте дополнительный элемент:

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