Добавление иконки перед ссылкой

Чтобы ссылка на внешний ресурс выглядела более узнаваемо, можно добавить к ней иконку, используя только CSS:

a[href*="github.com"]::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  content: "";
  background-image: url('/assets/icons/github.svg');
  background-repeat: no-repeat;
  background-size: contain;
}
a[href*="t.me"]::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  content: "";
  background-image: url('/assets/icons/telegram.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

Работает для всех ссылок, в href которых встречается нужный домен.

Больше гибкости

Отображение разных иконок для одного домена:

a[href^="https://github.com"] {
  --icon: url('/assets/icons/github-icon.svg');
  &[href*="/pulls"] {
    --icon: url('/assets/icons/github-pull-icon.svg');
  }
  &::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.3em;
    content: "";
    background-image: var(--icon);
    background-repeat: no-repeat;
    background-size: contain;
  }
}

Результат:

Vue RepoVue Pull Requests

⚠️ Безопасность

Можно указать ссылку на favicon напрямую:

a[href*="github.com"]::before {
  background-image: url("https://github.com/favicon.ico");
}

Но есть нюансы:

• такие запросы подчиняются CORS-политике, и браузер может заблокировать загрузку;
• запросы к favicon являются внешними — они могут обмениваться куками и оставлять след в логах целевого сайта.

Поэтому рекомендуется хранить иконки на сервере, либо вставлять их в формате base64.