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

我试图用html/css在句子中间实现一个图标。如何在使用css/html的句子中间使用图标/图像

经过一段时间，寻找我决定要问。

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

%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格的图标没有显示什么了我现在有。有人知道我在这里错过了这个吗？

来源

2017-04-26 kdweber89

做图像工作的？ –

@Jeff，不会打破它，他们的代码工作正常https://codepen.io/anon/pen/OmWXNm –

@MichaelCoker啊，好的。没有意识到这一点！谢谢！（删除我最后一个错误的评论） – Jeff

您使用image作为空元素的BACKGROUND。您可以通过将元素设置为内嵌块并设置其尺寸来修复它。

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

OR在我看来，更好的办法是使用IMG元素，而不是与背景跨度。例如： 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>

来源

2017-04-26 20:36:49

非常感谢！这正是我所期待的，我真的很感激它！ – kdweber89

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

回答

相关问题