Управление иконками / текстом, отображаемым с использованием классов CSS - PullRequest
Новая
       12

Управление иконками / текстом, отображаемым с использованием классов CSS

0 голосов
/ 06 ноября 2018

У меня есть div с содержимым, которое может быть в стиле info или warning , как показано ниже. (Подчеркивание предназначено для деактивации воздействия класса для в этом конкретном примере , и его не нужно рассматривать в этой области.) 

<div className="content info _warning">
  ...
  <div className="footer">
    <i className="fas fa-exclamation-triangle"></i>
  </div>
</div>

путем переключения на 

<div className="content _info warning">
  ...
</div>

Я управляю цветом значка внизу, как установлено в следующем стиле. 

div.content.warning div.footer { ...
  color: burlywood;
}

div.content.info div.footer { ...
  background-color: fuchsia;
}

Проблема в том, что я хотел бы, чтобы значок также изменился. Если бы я использовал изображения, я бы спрятал все за нужным, но против использования векторизованных вкусностей FontAwesome. Я рассмотрел набор элементов div с различным содержимым, как показано ниже, но он кажется неуклюжим.

...

Существует ли подход на основе CSS, который можно использовать для изменения значка, показанного в псевдокоде ниже? 

div.content.warning div.footer { ...
  color: burlywood;
  image: "fas fa-warning";
}

div.content.info div.footer { ...
  background-color: fuchsia;
  image: "fas fa-info";
}

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Поскольку вы используете значки FontAwesome, вы должны продолжать использовать классы fa- * для разных элементов и соответственно скрывать их с вашими пользовательскими классами. Вот что я имею в виду: 

<div class="footer">
  <div class="info-message">
    <i class="fa-info-icon"></i>
  </div>

  <div class="warning-message">
    <i class="fa-warning-icon"></i>
  </div>
</div>

И в CSS: 

.footer .info-message,
.footer .warning-message {
  display: none;
}

.footer.info .info-message {
  display: block;
}

.footer.warning .warning-message {
  display: block;
}

Таким образом, будет отображаться соответствующий элемент иконки, дающий .info или .warning в нижнем колонтитуле.

0 голосов
/ 06 ноября 2018

Вы можете использовать псевдоселектор: after в CSS, например: 

div.content.warning div.footer:after { ...
  content: "(Icon with .warning styles)"
}

div.content.info div.footer:after { ...
  content: "(Icon without .warning styles)"

}

если вы используете Font Awesome, вы можете динамически добавлять свойство содержимого через Javascript

...