JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

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

<p>A <a href><span>standardd link</span></a> in a paragraph.</p>

<nav class="social-networks">
  <ul class="network-list">
    <li class="network name">
      <a href class="link">
        <i class="fa fa-pencil"></i>
      </a>
    </li>
    
    <li class="network name">
      <a href class="link">
        <i class="fa fa-trash"></i>
      </a>
    </li>

    <li class="network name">
      <a href class="link">
        <i class="fa fa-align-justify"></i>
      </a>
    </li>
  </ul>
</nav>

CSS

/* general setup */
a {
  display: block;/* big touchable areas */
  text-decoration: none;
  color: inherit;
}

a:hover {
  cursor: pointer;
}

ul { /* probably already in your 'reset' */
  margin: 0;
  padding: 0;
  list-style: none;
}

p a {
  display: inline-block;
  text-decoration: underline;
  color: darkgray;
}

p a:hover {
  color: red;
}

/* 3rd party setup */
.fas {
  color: inherit;
  /* this is what you probably want */
  /* or you have some conflicting rules */
  font-size: 30px; /* a default? nope... doesn't work */
}

/* specific component */
.social-networks .network-list {
  display: flex;
  flex-direction: row;
  
  color: lightblue;
  transform: translate(-1rem, 0)
}

.social-networks .link {
  font-size: 30px;
  padding: 1rem; /* lots of space for fingers */
  transition: .5s;
}

.social-networks .link:hover {
  color: red;
  transition: 0s;
}