Как сделать так, чтобы у шрифтовых иконок не было текстового оформления?

Question

Кажется, у меня проблема с тем, что шрифтовые иконки отображаются фиолетовым для ссылок, по которым уже нажали. Вот как я настроил HTML:

<div class="notxtdec"> 
<a href="https://www.facebook.com"><i class="fab fa-facebook-f"></i></a>
</div>

CSS:

.notxtdec {
text-align: center;
align-items: center;
font-size: 12px;
text-decoration: none; }

Answer 1

.notxtdec выбирает div, а не вашу ссылку. Если вы хотите установить текстовое оформление для гиперссылки, вам нужно сделать что-то вроде этого, предназначенное для тега привязки:

.notxtdec {
    text-align: center;
    align-items: center;
    font-size: 12px; 
}

.notxtdec a {
    text-decoration: none; 
}

text-decoration просто удалит подчеркивание, которое автоматически добавляется большинством браузеров, поэтому, если вы пытаетесь установить ссылку, активный или посещенный цвета, вам также необходимо добавить эти правила:

/* anchor tags which have a valid href attribute */
.notxtdec a:link {
    color: #yourcolorhere
}

/* anchor tags which are being pressed/clicked */
.notxtdec a:active {
    color: #yourcolorhere
}

/* anchor tags which have an href which exists in the browser's history */
.notxtdec a:visited {
    color: #yourcolorhere
}

Answer 2

Пример здесь может вам помочь.

Если вы добавите что-то подобное в ваш файл css, он всегда будет оставаться тем же цветом, даже если вы нажмете на эту ссылку раньше .

a:link {
  color: red;
  text-decoration: none;
}

a:visited {
  color: red;
  text-decoration: none;
}