Background SVG distinguished posts

Dev
2

It looks like their implementation goes beyond simple CSS changes because that SVG is added to the markup, but this should also be possible with CSS alone…

I think this should get you most of the way there

.topic-post.moderator {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    display: block;
    width: 100px;
    height: 100px;
    background: url('data:image/svg+xml;utf8,
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="100" height="100"><path fill="currentColor" d="M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9C448 134.3 348.6 32 225.9 32zM224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128z"></path></svg>');
  }
}
15 Likes