Лучший вариант, чем дисплей: блок - PullRequest
Новая
       8

Лучший вариант, чем дисплей: блок

0 голосов
/ 04 марта 2019

Так что я хочу поставить иконку над h3 исключительно с использованием css.Причина в том, что я не хочу редактировать HTML в плагине WordPress.

Поэтому я решил использовать псевдоэлемент ::before, который отображает значок правильно, но помещает его перед h3, а не над.

Добавление display:block решало эту проблему до тех пор, пока я не решил поместить рамку вокруг значка, который затем помещает рамку вокруг всего блока, а это не то, что мне нужно.

Итак, яЯ ищу лучшие варианты, если кто-то может посоветовать.

enter image description here

h3.icon:before {
  font: normal normal normal 16px/1 FontAwesome;
  content: "\f0c1";
  display: block;
  margin-bottom: 25px;
  padding: 20px;
  border: 1px solid #000;
}

<h3 class="icon" style="color: #000000;">Los Angeles</h3>

1 Ответ

0 голосов
/ 04 марта 2019 

h3.icon:before {
  font: normal normal normal 16px/1 FontAwesome;
  content: "\f0c1";
  display: block;
  margin-bottom: 25px;
  padding: 20px;
  border: 1px solid #000;
  text-align:center;
  width:50px;
  margin:auto;
}
<h3 class="icon" style="color: #000000;">Los Angeles</h3>

Не совсем уверен, чего вы хотите достичь, хотите ли вы, чтобы вокруг рамки была иконка, но не со всеми дополнительными отступами в блоке?

Если это так, попробуйте указать ширину и поле с каждой стороны.

...