Шрифт Awesome Цвет фона

При использовании блестящего шрифта Awesome, как я могу сделать значки не прозрачными - например, если я хочу использовать http://fortawesome.github.io/Font-Awesome/icon/chevron-circle-up/, но не иметь "стрелку вверх" "внутри черного круга будет прозрачный, но сплошной цвет (белый)?

Спасибо!

Ответ 1

UPDATE: Как указал xavier ниже, у font-awesome есть Stacked Icons, который позволит вам поместить круг за иконкой без использования хака. По сути, вы кладете любой значок, который хотите, поверх их значка fa-circle. Затем вы можете создать стиль круга независимо от значка и изменить его на любой другой цвет.

Вот пример, основанный на коде с их сайта:

.fa-circle {
  color: black;
}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<span class="fa-stack" style="vertical-align: top;">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-chevron-up fa-stack-1x fa-inverse"></i>
</span>

Ответ 2

вы можете использовать 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;
}

Ответ 3

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

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

Ответ 4

Белый фон масштабируется от размера шрифта 1px до 150px для 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>

Ответ 5

Самым простым решением, которое я нашел, было просто использовать фон с радиальным градиентом. 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%);
}

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

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