<div class="hex twitter">&#x2B22;</div>
<div class="hex github">⬢</div>
<div class="hex codepen">⬢</div>
<div class="hex email">⬢</div>
<div class="hex reddit">⬢</div>
<!-- Apparently chrome sucks and can't handle some god damn html entities even when the font is changed to a font that is supposed to handle html entities
View this in Firefox

USING HTML ENTITIES IS REALLY DUMB!!
If you want to do this properly making the hexagons SVGs or using some sort of font that has hexagons in it.
-->

.container {
  margin: 10px;
  font-size:16px;
}

.hex {
  position: relative;
  font-size:10em;
  transform: scale(1,.9);
  float:left;
  cursor:pointer;
  font-family: 'unifont';
}
.hex::after {
  content: '⬢';
  transform: scale(1.1);
  position: absolute;
  left: 0;
  top:0;
  z-index: -1;
}
.hex::before {
  content: ' ';
  width: 64px;
  height: 64px;
  z-index:1;
  position: absolute;
  top:50%;
  left:30px;
  display:block;
  margin-top:-32px;
}
.twitter {
 color: #08A4CA; 
}
.twitter::after {
  color: #34C6F3;
}
.twitter::before {
  
  background: url('https://i.imgur.com/MRS8s.png');
}
.github {
  color:#242424;
}
.github::after {
  color:#999;
}
.github::before {
  background: url('https://i.imgur.com/0eBXG.png');
}

.codepen {
  color:#F1DA3C;
}
.codepen::after {
  color:#F4E368;
}
.codepen::before {
  background: url('https://i.imgur.com/gEa5t.png');
}

.email {
  color:#A0B23B;
}
.email::after {
  color:#ADBF4D;
}
.email::before {
  background: url('https://i.imgur.com/rhrJA.png');
}

.reddit {
  color:#3A3AFF;
}
.reddit::after {
  color:#FF4500;
}
.reddit::before {
  background: url('https://i.imgur.com/QPaQj.png');
}