在图标上显示通知数量
Show number of notifications on icon
我有一个显示通知数量的通知图标 (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:使用超赞字体图标
如果要使用font-awesome图标
这是它的代码
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>
我有一个显示通知数量的通知图标 (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:使用超赞字体图标
如果要使用font-awesome图标
这是它的代码
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>