JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <a class="btn icon-btn btn-success" href="#">
        <i class="btn-glyphicon text-success fa fa-plus"></i>
        Add
    </a>

CSS

.btn-glyphicon {
    position: relative;
    padding: 3px;
    background: #ffffff;
    margin-right: 4px;
    border-radius: 50px;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    vertical-align:middle !important;
    align-items:center;
}

.btn-glyphicon:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-btn {
    padding: 1px 15px 3px 2px;
    border-radius: 50px;
    text-align: center;
    vertical-align:middle;
}