Two ways to create a question-mark-in-circle “icon”

Filed under: Software
0 Comments

I recently had use for a little question-mark-in-a-circle icon. I did some searches for such icons, and found some, but it occurred to me that it would be better to use CSS or SVG to create a quasi-icon that isn’t an image.

So I did some searching, and found two ways to do it. There are a bunch of Stack Overflow pages that each contain multiple answers; these are the answers that I distilled for my own use out of the ones provided.

First, CSS:

?

.in-circle {
    display: block;
    background: #4444ff;
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    font-family: Verdana;
}

Next, SVG:

? ? 
<svg width="50" height="50">
  <circle cx="25" cy="25" r="20" fill="#4444ff" />
  <text x="50%" y="50%" text-anchor="middle" fill="white" font-size="20px" font-family="Verdana" dy=".3em">?</text>
?
</svg>

You can try out both of those at CodePen. Here, for example, is the Centered Text in SVG Circle code that I derived my version from.

Join the Conversation