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

Благодарность!

36
John Anderson 23 Окт 2014 в 00:17

5 ответов

Лучший ответ

ОБНОВЛЕНИЕ: Как указал Ксавьер ниже, font-awesome имеет составные значки < / a>, который позволит вам поставить кружок за значком без использования взлома. По сути, вы складываете любой значок поверх его значка 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>

ОРИГИНАЛЬНЫЙ ОТВЕТ: К сожалению, весь значок считается одним «персонажем» на странице, и поэтому у вас нет такого детального контроля над ним. Вы можете просто установить одно свойство «цвет», чтобы установить желаемый цвет символа / значка.

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

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

Затем в вашем CSS:

.fa-chevron-circle-up {
  background: yellow;
  border-radius: 50%;
  height: 1em;
  width: 1em;
}

Если фоновый кружок смещает значок, вы можете использовать line-height, чтобы исправить это.

47
Kyle Goode 22 Фев 2019 в 17:54

Вы можете использовать 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;
}
39
Jacob Raccuia 12 Янв 2018 в 23:24

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

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

9
Igor Ivancha 1 Май 2016 в 15:56

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

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

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

6
Mike 27 Сен 2019 в 14:08

Белый фон масштабируется от размера шрифта от 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>
0
SoEzPz 20 Июн 2019 в 05:27