html - 尝试使用独特的超赞字体图标定位每个链接

Question

尝试使用 Font-Awesome 图标定位每个事件链接。我正在尝试使用“Content:before”和“a::first-child”的组合。

用图标定位第三个 a 链接“联系我们”，无效。尝试了很多组合。这可能吗？ xD

.children.windowbg > a::first-child before{
  content: "\f114";
  font-family: fontawesome !important;
  padding-right:5px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<td class="children windowbg" colspan="3">
							<strong>SUB-FORUMS</strong>: <a href="#">Report Copyright Violations</a>, <a href="#">Disclaimer</a>, <a href="#">Contact Us</a>, <a href="#">Privacy policy</a>
						</td>

?

https://jsfiddle.net/rr78gfw1/

Answer 1

.windowbg  a:nth-of-type(1):before{
  content: "\f114";
  font-family: fontawesome !important;
  margin-left: -23px;
  position :absolute;
  color:red;
  font-size:20px;
}

.windowbg  a:nth-of-type(2):before{
  content: "\f115";
  font-family: fontawesome !important;
  margin-left: -23px;
  position :absolute;
  color:red;
  font-size:20px;
}

.windowbg a
{
  margin-left:25px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="children windowbg" colspan="3">
							<strong>SUB-FORUMS</strong>: <a href="#">Report Copyright Violations</a>, <a href="#">Disclaimer</a>, <a href="#">Contact Us</a>, <a href="#">Privacy policy</a>
						</div>

这里提到的一些解决方案并不是纯粹的 CSS 解决方案，因为它们要求您更改 DOM 结构。

你没有正确使用选择器，在 before :P 之前没有 : 并且 a 不是第一个 child 。使用 nth-of-为此输入选择器。

此外，如果没有 table，你不能使用 td 标签。我的演示是在用 div 替换 td 之后。

像这样，

.windowbg  a:nth-of-type(1):before{
  content: "\f114";
  font-family: fontawesome !important;
  margin-left: -23px;
  position :absolute;
  color:red;
  font-size:20px;
}

fiddle 链接:https://jsfiddle.net/rr78gfw1/1/