比显示更好的选择：块

Question

所以我想单独使用 css 在 h3 上方放置一个图标。原因是我不想在 wordpress 插件中编辑 html。

所以我决定使用伪元素 ::before 来正确显示图标，但将其放在 h3 之前而不是上面。

添加 display:block 解决了这个问题，直到我决定在图标周围放置一个边框，然后在整个块周围放置一个边框，这不是我想要的。

所以我正在寻找更好的选择，如果有人可以提供建议的话。

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>

Answer 1

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>

不太确定你想要实现什么，你想要图标周围的边框而不是块中的所有额外填充吗？

如果是这种情况，请尝试为其两侧设置宽度和边距。

比显示更好的选择：块

Better option than display: block

css

display