CSS

Font Awesome met een cirkel eromheen

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>