我有一个通知图标（字体真棒 /questions/tagged/font-awesome) 显示通知数量。
我在尝试让数字显示在正确的位置时遇到问题，如下图所示
我需要将文本变小并向右和向上移动一点......
这是代码
.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>
谁能帮忙，我对此很陌生。
示例1：使用背景图像
最好的方法是使用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>
示例2：使用很棒的字体图标
如果你想使用字体真棒 /questions/tagged/font-awesome icon
这是它的代码
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
