HTML
<a href="#" class="btn btn-secondary bwi-btn" role="button"><span class="bwi-btn-label"><i class="fa-brands fa-whatsapp"></i></span>+31 99 123456</a>
Font Awesome CSS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
CSS (demo on this page)
.bwi-btn {
position: relative;
width: 160px;
text-align: center;
padding: 11px 10px 4px 10px;
outline-offset: 2px;
border-radius: 6px;
color: #ffffff !important;
border: 1px solid #ffffff;
outline: 1px solid #6c757d;
}
.bwi-btn-label {
position: absolute;
display: inline-block;
width: 30px;
height: 30px;
font-size: 15px;
text-align: center;
top: -20px;
left: 64px;
padding: 2px 0 0 0;
background: inherit;
outline-offset: 0;
border-radius: 100%;
border: 2px solid #ffffff;
outline: 1px solid #6c757d;
}