我如何使超棒的字体图标没有文字装饰？

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，而不是您的 link。如果你想为 hyperlink 设置文本装饰，你需要做这样的事情，它针对锚标签：

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

.notxtdec a {
    text-decoration: none; 
}

text-decoration 只会删除大多数浏览器自动添加的下划线，因此如果您尝试设置 link、活动或访问颜色，您还需要添加这些规则:

/* 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

例子here可以帮到你。

如果您将类似的内容添加到您的 css 文件中，即使您之前单击此 link，它也将始终保持相同的颜色。

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

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

我如何使超棒的字体图标没有文字装饰？

How do I make it so font-awesome icons have no text decoration?

html

css

font-awesome