Reputation: 33445

Trying to create a consistent ?-mark-inside-circle in CSS

I'm trying to create a question-mark-inside-a-circle glyph using CSS. It should look like © basically.

a::before {
    content: '?';
    font-size: 60%;
    font-family: sans-serif;
    vertical-align: middle;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    width: 1.8ex;
    height: 1.8ex;
    border-radius: 1ex;
    color: blue;
    background: white;
    border: thin solid blue;
}

.infolink:hover::before {
    color: white;
    background: blue;
    border-color: white;
}

<a class="infolink" href="#">a link</a>

It's not bad on Firefox but the positioning of the question mark inside the circle is off-centre on Chrome (and I don't have IE to test but I'm assuming the worst).

I don't understand much about the nuances of fonts. Can this approach be made to work cross-platform or should I give up and use an image? I'm doing it this way to keep it scaled with the font.

Tweaking the settings as suggested so far is providing improvements only in select circumstances. There always seems to be some font sizes for which there is more than a rounding error (more than 1 pixel that is) of off-centreness either horizontally or vertically. The goal is to fit the border to the question mark, not fit the border to the square box which contains the question mark, as I suspect is happening.

JSFiddle Link.

Upvotes: 13

Answers (6)

vir us

Reputation: 10745

Based on the Abhitalk's answer and playing with it a bit, I've came up with a responsive approach, where the question mark and the circle are both scale in proportion to the base font size so you can easily set the size of the whole thing:

    .infolink:after {
        content: '?';
        display: inline-block;
        font-family: sans-serif;
        font-weight: bold;
        text-align: center;
        font-size: 0.8em;
        line-height: 0.8em;
        border-radius: 50%;
        margin-left: 6px;
        padding: 0.13em 0.2em 0.09em 0.2em;
        color: inherit;
        border: 1px solid;
        text-decoration: none;
    }

<div class="infolink" style="font-size: 20px"></div>

If you see how this can be improved further, your comment is very welcome!

Upvotes: 6

jbob77435

Reputation: 187

Tested and is consistent in Chrome, Edge and Firefox (not tested IE).

.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;
}

Apply to span element:

<span class="in-circle">?</span>

Solution sourced from: https://www.kith.org/jed/2020/04/15/two-ways-to-create-a-question-mark-in-circle-icon/

Alternatively, you could use a 3rd party library like Font Awesome, which has good cross-browser support. Example here: https://www.w3schools.com/icons/tryit.asp?filename=tryicons_fa-question-circle

Upvotes: 2

Prathamesh Kowarkar

Reputation: 23

You can use Unicode characters to get a more concise solution. I used a question mark with Combining Enclosing Circle (U+20DD)

.infolink::before {
    content: '?⃝';
    display: inline-block;
    margin-right: 0.25rem;
}

Upvotes: 2

Abhitalks

Reputation: 28437

See this fiddle: http://jsfiddle.net/hg7nP/7/

Highlighting only the things I changed:

.infolink:before {
    font-size: 1.4ex;
    line-height: 1.8ex;
    border-radius: 1.2ex;
    margin-right: 4px;
    padding: 1px;
    text-decoration: none;
}

Regarding cross browser, it is working in all browsers except IE < 9 where border-radius won't work.

Upvotes: 11