Add a white background to a fontawesome icon

Question

I want to fill the question mark icon with a white background. As you can see in my example, there is still a small white border around the icon. How is it possible to shrink the background, that only the question mark gets filled?

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>

Similar question was asked a couple of days ago: https://stackoverflow.com/questions/52422041/change-the-color-of-font-awesomes-icon/52422180#52422180 — VXp, Sep 24 '18 at 09:25
here is an easier way with less of code: https://jsfiddle.net/m5zdf6eg/ — Temani Afif, Sep 24 '18 at 13:20

score 7 · Accepted Answer · edited Sep 24 '18 at 13:27

You can play with background-image and a linear gradient like below

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>

Add a white background to a fontawesome icon

1 Answers1