html - 如何使用 css/html 在句子中间使用图标/图像

Question

我正在尝试使用 html/css 在句子中间实现一个图标。

经过一段时间的尝试和搜索，我决定改问。

基本上我有一个基于特定条件的句子。我只是要显示条件的结果

%h5 {{ location.name }} <span class = "otherTest">:D</span><span class = "test"> YEAH BABY, THIS IS A PRIORITY!!!!! </span>

用我的 CSS 我有

.test{
  color: #AA8D7C;
}

.otherTest{
  background: url(/assets/icons/location.png);
  vertical-align: middle;
  height: 5px;
  widows: 5px;
  z-index: 55;
}

我有一个附加到 otherTest div 的图标，它没有显示我现在拥有的内容。有人知道我在这里错过了什么吗？

Answer 1

您使用图像作为空元素的背景。您可以通过将元素设置为内联 block 并设置其尺寸来修复它。

.otherTest{
  background: url(/assets/icons/location.png);
    display:inline-block;
    width:5px;
    height:5px;

或者在我看来更好的方法是使用 img 元素而不是 span with background。例如:CSS

.otherTest{
  display:inline-block;
  height: 5px;
  width: 5px;
}

HTML

%h5 {{ location.name }} <img src="/assets/icons/location.png" class = "otherTest" alt=':D'><span class = "test"> YEAH BABY, THIS IS A PRIORITY!!!!! </span>