Trying to target each a link with a unique font-awesome icon - html

Question

Trying to target each active link with an Font-Awesome icon. I am trying to use a combination os "Content:before" AND "a::first-child".
Targeting the third a-link "contact us" with an icon, not working. Tried many combinations. Is this even possible? 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>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy
</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>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy
</div>
Some of the solutions mentioned here are not purely CSS solutions as they ask you to change the DOM structure.
You have not used the selectors rightly,There is no : before the before :P and a is not the first child.Use nth-of-type selector for this.
Also you cannot use td tags like that without a table.My demo is after replacing the td with a div.
Like this,
.windowbg a:nth-of-type(1):before{
content: "\f114";
font-family: fontawesome !important;
margin-left: -23px;
position :absolute;
color:red;
font-size:20px;
}
Fiddle link: https://jsfiddle.net/rr78gfw1/1/

Answer 2

you give a CLASS to your link and give him a font-family
.yourlink{
font-family: fantasy;
}
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy
</td>

Answer 3

In order to add font-awesome icons to your links, just use an <i> tag as <i class="fa fa-tags"></i> inside your anchor tags.
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: Report Copyright Violations<i class="fa fa-tags"></i>, Disclaimer<i class="fa fa-exclamation"></i>, Contact Us<i class="fa fa-phone"></i>, Privacy policy<i class="fa fa-info"></i>
</td>
Refer here for demo

Answer 4

The other answers have preferable solutions. This one just explains errors in the code snippet
Pseudo-classes like :first-child are with a single colon, instead of two.
:first-child selects (in this case) an a tag that's the first child of .children.windowbg. The a tag you're trying to select is no the first child, but the first of it's type. Therefore, you should use :first-of-type.
To select a pseudo-element, use a colon (:before). Now you were selecting a before tag in the a tag.
A td tag without a table is not valid, and the tag is removed in the code snippet, so for the sake of testing, I wrapped it in a table and a tr tag.
.children.windowbg > a:first-of-type: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" />
<table>
<tr>
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy
</td>
</tr>
</table>
The other answers are preferable, because when you change the order of the links or add one, you need to change the CSS (and because CSS isn't for non-dynamic styling). A better solution is to add the icons in the HTML.
Update
There is :first-of-type to select the first element of it's kind, usually in a certain parent. To select the last child, use :last-of-type. To select other children, use :nth-of-type(n), where n is the index of the element. The first element has index 1, not index 0. For example, to select the third element, use :nth-of-type(3).
But n is not limited by that. You can use odd and even to select odd and even elements, and you can make a calculation with n. Then it selects elements with an index that could be the answer when n is any whole number. For example, when you use :nth-of-type(2n):
Values for "n" | Indices
----------------------------
0 | 2 * 0 = 0
1 | 2 * 1 = 2
2 | 2 * 2 = 4
3 | 2 * 3 = 6
... | ...
This selects all elements with an index that is a multiple of 2, so all even elements. Another example is :nth-of-type(3+n):
Values for "n" | Indices
----------------------------
0 | 3 + 0 = 3
1 | 3 + 1 = 4
2 | 3 + 2 = 5
3 | 3 + 3 = 6
... | ...
This selects all elements, except the first two.
Explanation from MDN.
This goes the same for :first-child (:last-child, :nth-child(n)).