比显示更好的选择：阻止

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>

不确定要实现的目标吗？是否要在图标周围添加边框，而不是在块中添加所有额外的填充？

如果是这种情况，请尝试在其两侧都提供宽度和边距。