Html 在图标上显示通知数量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31784519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show number of notifications on icon
提问by Shane
I have a notification icon (font-awesome) which shows the number of notifications.
我有一个显示通知数量的通知图标 ( font-awesome)。
I am having a problem trying to get the number to display in the correct position, as shown in see below image
我在尝试将数字显示在正确位置时遇到问题，如下图所示
I need the text to be smaller and move right and up a little... here is the code
我需要文本更小并向右和向上移动一点......这是代码
.header .bubble {
border-radius: 100%;
height: 14px;
width: 14px;
background-color: rgba(226, 32, 91, 0.77);
color: #ffffff;
text-align: top;
position: relative;
top: 0px;
float: right;
right: -3px;
}
<a href="javascript:;" id="notification-center" class="icon-set globe-fill" data-toggle="dropdown"><span class="bubble">2</span>
Can anyone help, I am new to this.
任何人都可以帮忙，我是新手。
回答by eirenaios
example1: using background image
示例 1：使用背景图像
The best way to do this is to use position:absoluteto child span of parent anchor.
最好的方法是使用position:absolute父锚的子跨度。
a.notif {
position: relative;
display: block;
height: 50px;
width: 50px;
background: url('http://i.imgur.com/evpC48G.png');
background-size: contain;
text-decoration: none;
}
.num {
position: absolute;
right: 11px;
top: 6px;
color: #fff;
}<a href="" class="notif"><span class="num">2</span></a>example2: using font awesome icon
示例2：使用字体真棒图标
If you want to use font-awesomeicon
如果你想使用字体真棒图标
this is code for it
这是它的代码
a.fa-globe {
position: relative;
font-size: 2em;
color: grey;
cursor: pointer;
}
span.fa-comment {
position: absolute;
font-size: 0.6em;
top: -4px;
color: red;
right: -4px;
}
span.num {
position: absolute;
font-size: 0.3em;
top: 1px;
color: #fff;
right: 2px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<a class="fa fa-globe">
<span class="fa fa-comment"></span>
<span class="num">2</span>
</a>