[data-letters]:before {
  content:attr(data-letters);
  display:inline-block;
  font-size:1em;
  width:2.5em;
  height:2.5em;
  line-height:2.5em;
  text-align:center;
  border-radius:50%;
  background:teal;
  vertical-align:middle;
  margin-right:1em;
  color:white;
}

.letter-avatar {
  display:inline-block;
  font-size:1em;
  width:2.5em;
  height:2.5em;
  line-height:2.5em;
  text-align:center;
  border-radius:50%;
  vertical-align:middle;
  margin-right:1em;
}

/* Adapt font color if the background is light or dark  */
.dark-color { color: black }
.light-color { color: white }