为 fontawesome 图标添加白色背景 [重复]答案

【问题标题】：Add a white background to a fontawesome icon [duplicate]为 fontawesome 图标添加白色背景 [重复]
【发布时间】：2018-09-24 09:22:39
【问题描述】：

我想用白色背景填充问号图标。正如您在我的示例中看到的那样，图标周围仍然有一个小的白色边框。怎么可能缩小背景，只填充问号？

body {
  background: lightgreen;
  font-size: 126px;
}

.fa-question-circle:before {
  background: white;
  border-radius: 100%;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<i class="fas fa-question-circle"></i>

【问题讨论】：

几天前有人问了类似的问题：stackoverflow.com/questions/52422041/…
这里有一个更简单的方法，代码更少：jsfiddle.net/m5zdf6eg

标签： html css font-awesome

【解决方案1】：

您可以使用背景图像和线性渐变，如下所示

body {
  background: lightgreen;
  font-size: 126px;
}

.fa-question-circle:before {
  background-image: linear-gradient(#fff,#fff);
  background-repeat: no-repeat;
  background-size: 50% 75%;
  background-position: center;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<i class="fas fa-question-circle"></i>

【讨论】：