JSFiddle - React, Tailwind, and code Playground

by Skaiman

HTML

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="prefixs_agreed">.</span>
<br/><br/>
<span class="prefixs_question">.</span>
<br/><br/>
<span class="prefixs_addon">&#xf1b9;</span>

CSS

.prefixs_agreed {
  font-size: 0px;
}

.prefixs_agreed:before {
  content: 'O';
  font-size: 14px;
}

.prefixs_question {
    display: inline-block;
    background: #16a085;
    color: #16a085;
    border-radius: 50%;
    width: 24px;
    height: 24px;
}

.prefixs_addon {
  font-family: 'FontAwesome';
}