A Pen by Brandon Ratzloff.

index.html

<div class="rid-conference"><div class="icon"></div><div class="hide">conference</div></div>
<div class="rid-member"><div class="icon"></div><div class="hide">member</div></div>

MARS---Role-Icons.markdown

MARS - Role Icons

A Pen by Brandon Ratzloff on CodePen.

License.

style.css

.hide {
  display: none;
}
.icon {
  display: block;
  text-align: center;
  padding: 2px;
  text-transform: uppercase;
  border-radius: 12px;
  float: left;
  margin: 2px;
  height: 20px;
  width: 21px;
  position: relative;
}
.icon:before {
  color: #FFF;
  font-weight: bold;
}
.rid-member .icon {
  background: #ff7e00;
}
.rid-member .icon:before {
  content: "M";
}
.rid-conference .icon {
  background: #0083f5; 
}
.rid-conference .icon:before {
  content: "C";
}