Question

我想在<a>链接中使用图标字体。我已经为a，a:hover和a:active设置了CSS规则。但是，a:active仅在我单击Chrome中的链接时才触发，而在Firefox和IE中却没有。

示例：

ul {
  margin: 0;
  padding: 0;
}
li {
  display: inline;
}

a {
  background: rgba(255, 0, 0, 0.1);
}
a:hover {
  background: rgba(255, 0, 0, 0.2);
}
a:active {
  background: rgba(255, 0, 0, 0.3);
  position: relative;
  top: 1px;
  left: 1px;
}

.icon::before {
  content: "[icon]";
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

<ul>
  <li><a href="#"><i class="icon"></i></a></li>
  <li><a href="#"><i class="fas fa-heart"></i></a></li>
  <li><a href="#"><i class="fas fa-star"></i></a></li>
</ul>

Example JSFiddle

不应该这样使用吗？推荐的方法是什么？

谢谢！

PS。我实际上正在使用icons8中的图标。除了使用字体外，它还有其他选项，我会在以后尝试，但是我仍然想知道如果要使用字体该如何解决。

编辑：

令我惊讶的是，我发现如果我将position: relative; top: 1px; left: 1px;中的a:active东西取出来，那么它就可以在Firefox中工作（但似乎在IE中还是不行）...并不重要，我暂时不使用它。

图标8还提供了其他选项，包括图像和SVG设置，我认为在调整颜色和大小时不如字体方便。

a：active在Firefox中未与伪元素:: before一起使用

0 个答案: