我正在尝试使用 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 的图标,它没有显示我现在拥有的内容。有人知道我在这里错过了什么吗?
最佳答案
您使用图像作为空元素的背景。 您可以通过将元素设置为内联 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>
关于html - 如何使用 css/html 在句子中间使用图标/图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43643691/