Question

我正在尝试使用CSS创建一个圆圈内的问号标记。它应该看起来像©基本上。

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

它在firefox上并不坏，但是圆圈内问号的位置在Chrome上偏离中心（我没有IE测试，但我假设最差）。

我对字体的细微差别了解不多。这种方法可以跨平台工作，还是应该放弃并使用图像？我这样做是为了让它与字体一起缩放。

更新：到目前为止，根据建议调整设置仅在特定情况下提供改进。似乎总是存在一些字体大小，其水平或垂直方向的偏离中心不仅有舍入误差（超过1个像素）。目标是使边框适合问号，不适合包含问号的方框边框，正如我怀疑的那样。

Answer 1

看到这个小提琴：http://jsfiddle.net/hg7nP/7/

仅突出显示我更改的内容：

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

关于跨浏览器，它适用于除IE＆lt;之外的所有浏览器。 9 border-radius不起作用。

Answer 2

只需使line-height与element / pseudo-element的高度相同。

line-height:1.8ex;

Answer 3

看起来你错过了line-height:1;添加它，它会变得更好。

我个人认为font-size:50%看起来效果最好，但这是我的看法。

Updated Fiddle

Answer 4

W3C学校提供了一个有用的指南，用于使用Awesome字体和unicode创建圆形问号，并在Chrome，Firefox，Edge和IE中进行了测试，并且在所有方面看起来都是一致的，请参见演示：

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<h1>fa fa-question-circle</h1>

<i class="fa fa-question-circle"></i>
<i class="fa fa-question-circle" style="font-size:24px"></i>
<i class="fa fa-question-circle" style="font-size:36px"></i>
<i class="fa fa-question-circle" style="font-size:48px;color:red"></i>
<br>

<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-question-circle"></i></button>

<p>Unicode:</p>
<i style="font-size:24px" class="fa">&#xf059;</i>

</body>
</html>

来自W3C学校：https://www.w3schools.com/icons/tryit.asp?filename=tryicons_fa-question-circle

Answer 5

基于Abhitalk的回答并进行了一些处理，我想出了一种响应式方法，其中问号和圆圈都与基本字体大小成比例缩放，因此您可以轻松设置整个事情：

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

如果您看到如何进一步改进它，非常欢迎您发表评论！

Answer 6

您可以使用Unicode字符来获得更简洁的解决方案。我在合并圆圈（U + 20DD）中使用了问号

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

尝试在CSS中创建一致的？-mark-inside-circle

6 个答案: