css

How to add hyperlink cues in CSS by using fontawesome

I like the little icons next to hyperlinks that indicate if that link will take me offsite, open a popup, or link to a file (as opposed to another page within the site). Here’s how to do it using fontawesome, purely in CSS.

First, add fontawesome CDN url, ideally in your header:

1
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

Then, define the styles (below is in stylus syntax):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
a[rel^="external"]:after
content "\f08e"
font-family FontAwesome
font-weight normal
font-style normal
display inline-block
text-decoration none
padding-left 3px
a[href^="http://www.YOURDOMAIN.com"]:after,
a.no_icon:after
content "" !important
padding-left 0
a[href^="https://www.YOURDOMAIN.com"]:after,
a.no_icon:after
content "" !important
padding-left 0

If you are not familar with stylus, here is the CSS code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a[rel^="external"]:after {
content: "\f08e";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: none;
padding-left: 3px;
}
a[href^="http://www.YOURDOMAIN.com"]:after,
a.no_icon:after {
content: "" !important;
padding-left: 0;
}
a[href^="https://www.YOURDOMAIN.com"]:after,
a.no_icon:after {
content: "" !important;
padding-left: 0;
}
Share