我正在尝试为我的项目做些新的事情。我有一个图标,可以说有点像邮件图标。在图像背景上显示文字
加载页面时,图标也会被渲染。根据我在页面加载过程中在后台执行的查询计数,我想在图标内/中显示该数字(计数)。有点像我看到Facebook上的通知显示在图标顶部或Gmail显示图标上有2个新电子邮件等。
最初,我想为每个数字都设置一个不同的图标,因为我有限制计数的最大限制。但是我正在考虑更好地以编程方式执行的其他选项。
我正在尝试为我的项目做些新的事情。我有一个图标,可以说有点像邮件图标。在图像背景上显示文字
加载页面时,图标也会被渲染。根据我在页面加载过程中在后台执行的查询计数,我想在图标内/中显示该数字(计数)。有点像我看到Facebook上的通知显示在图标顶部或Gmail显示图标上有2个新电子邮件等。
最初,我想为每个数字都设置一个不同的图标,因为我有限制计数的最大限制。但是我正在考虑更好地以编程方式执行的其他选项。
我会建议使图标图像的div的背景左右,那么你可以把它放在顶部的数字作为纯文本,使用填充移动它。
不知道为什么这是downvoted - 这是一个明显的答案。你需要一个带'background-image'的'span'或'div',你将用它来存储整型变量。 – user1477388
@ ced-b ..这是一个好主意。这就是我正在寻找的......只是关于如何解决展示问题的一般想法..有些人会得到更多乐趣低调的问题,而不是专注于帮助。 :-) – ZVenue
@ZVenue是的 - 我很高兴我可以帮忙。 –
尽管被回答和接受,只是想分享如何做到这一点,就像我之前在我的一个项目中做的那样。把它作为代码参考。
HTML:
<a href="#" class="icon" >
<span class="jewel">2</span>
</a>
CSS:
.icon {
position: relative;
display: inline-block;
height: 24px;
padding: 0px 4px 0px 20px;
background: ....;
}
.jewel {
position: absolute;
display: block;
top: -8px; right: -8px;
height: 16px; width: 16px;
text-align: center;
color: White;
background-color: Red;
overflow: hidden;
}
是。我问是否有人这样做过,他们是如何处理这种情况的。我说我可以为每个数字使用不同的图标,但是应该有其他方式可以做到这一点,而不是在显示大数字时创建100个图标。 – ZVenue
您是在讨论favicon或实际图标在页面上的某个地方?数字可以呈现为文字还是必须是图形的一部分? – Ennui
我认为这个问题应该已经发布在[meta.stackoverflow.com](http://meta.stackoverflow.com) – vishalkin