Font Awesome icon met een cirkel eromheen
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Font Awesome</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<style>
.demo-wrap {
margin-top: 2em;
}
.demo-container {
position: relative;
border: 1px solid #cccccc;
color: #222222;
padding: 20px;
}
.demo-container:hover {
cursor: hand;
cursor: pointer;
background-color: rgba(224,224,224,0.9);
color: #ffffff;
}
.demo-circle {
display: inline-table;
text-align: center;
width: 50px;
height: 50px;
border-radius: 50%;
}
.demo-icon {
font-size: 20px;
vertical-align: middle;
display: table-cell;
}
.demo-icon-linked-in {
color: #1278b6;
border: 4px solid #1278b6;
}
.demo-icon-facebook {
color: #4b69b1;
border: 4px solid #4b69b1;
}
.demo-icon-instagram {
color: #60569f;
border: 4px solid #60569f;
}
.demo-icon-twitter {
color: #2bb2e1;
border: 4px solid #2bb2e1;
}
</style>
</head>
<body>
<div class="demo-circle demo-icon-twitter"><span class="demo-icon fab fa-twitter"></span></div>
</body>
</html>