JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<a href="http://mylink.org/mypage/"><i class="fa fa-car"></i>Link Text</a>
CSS
a {
background-color: rgba(0,0,0,0.5);
border-radius: 3px;
padding: 6px;
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.1);
padding-left: 10px;
font-family: Times New Roman;
font-size: 25px;
line-height: 1.4;
display: block;
color: black;
font-weight: 300;
text-decoration: none; }
JavaScript
// When a link is clicked
$('a').click(function() {
// If the link contains an icon
if ( $(this).find('.fa').length ) {
// Remove the icon
$(this).find('.fa').remove();
// Prepend the spinner
$(this).prepend('<i class="fa fa-cog fa-spin"></i>');
}
});