Styling https and http links differently

As above

by RenaissanceDesign

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<p>
A paragraph of text with a <a href="https://renaissance-design.net">https link</a> and a <a href="http://renaissance-design.net">http link</a>. 
</p>

CSS

a[href^="http://"] {
  color: #9f2222;
}

a[href^="https://"] {
  color: #115f11;
}

a::before {
  font-family: "FontAwesome", sans-serif;
  padding-right: 0.2em;
}

a[href^="http://"]::before {
	content: "\f13e";
}

a[href^="https://"]::before {
	content: "\f023";
}