Font Awesome Цвет фона

Вы можете использовать fa-stack со значком fa-circle под другим, чтобы лучше контролировать пиксель только на границе:

<span class="fa-stack">
    <i class="fa fa-circle fa-stack-1x icon-a"></i>
    <i class="fa fa-times-circle fa-stack-1x icon-b"></i>
</span>

С участием:

.icon-a {
    color: #FFF;
    font-size: 0.9em;
}
.icon-b {
    color: #000;
}

Я просто использовал стиль внутри потрясающей ссылки шрифта, как этот...

<i class="fa fa-ban icon" style="background:#8BAAAD"></i>

Самым простым решением, которое я нашел, было просто использовать фон с радиальным градиентом. HTML:

<i aria-hidden="true" class="fa fa-arrow-alt-circle-up fa-3x"></i>

CSS:

.fa{
    color: red; 
    background: radial-gradient(grey 50%, transparent 50%);
}

Вы можете просто изменить желаемые цвета или селекторы, но это не позволит цвету фона переходить через круглые стрелки или что-то подобное.

Надеюсь, это кому-то поможет, так как некоторые другие ответы не будут хорошо масштабироваться.

Белый фон масштабируется от размера шрифта от 1 до 150 пикселей для fa-plus-circle.

// Note: Change background color to match your criteria

// SCSS
.fa-bg-white {
  position: relative;

  &:before {
    position: relative;
    z-index: 1;
  }

  &:after {
    position: absolute;
    content: '';
    background: #FFF;
    border-radius: 50%;
    z-index: 0;
    top: 10%;
    left: 10%;
    width: 75%;
    height: 75%;
  }
}


// HTML
<i class="fa fa-plus-circle fa-bg-white"></i>

У меня есть еще один совет для людей, которым все еще интересно:

<i class="fa fa-chevron-circle-up fa_with_bg"></i>

И css:

.fa_with_bg{
    position: relative;
}

.fa_with_bg::after{
    position: absolute;
    content: '';
    background: #fff;
    z-index: -1;
    top: 10px;
    left: 3px;
    width: 35px;
    height: 33px;
}

Вам просто нужно добавить к нему класс fa_with_bg.
* Возможно, вам придется немного поиграть со свойствами top, left, width и height.