在图标上显示通知数 [英] Show number of notifications on icon
本文介绍了在图标上显示通知数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个通知图标(
我需要缩小文本,向右移动一点...
这是代码
.header .bubble {
边界半径:100%;
高度:14像素;
宽度:14像素;
background-color:rgba(226,32,91,0.77);
颜色:#ffffff;
text-align:top;
职位:相对;
top:0像素;
float:正确;
右:-3px;
}
< a href = javascript :; id = notification-center class = icon-set globe-fill data-toggle = dropdown>< span class = bubble> 2< / span>
任何人都可以帮忙,我是新来的。
解决方案
example1:使用背景图片
最好的方法是使用 position:absolute
到父锚的子范围。
a.notif {
职位:相对;
显示:块;
高度:50像素;
宽度:50像素;
背景:url(’http://i.imgur.com/evpC48G.png’);
background-size:包含;
文字修饰:无;
}
.num {
position:absolute;
右边:11px;
top:6像素;
颜色:#fff;
}
< a href = class = notif>< span class = num> 2< / span>< / a>
example2:使用字体真棒图标
如果您想使用 font-awesome 图标
这是代码
a.fa-globe {
位置:相对;
字体大小:2em;
颜色:灰色;
cursor:指针;
}
span.fa-comment {
位置:绝对;
字体大小:0.6em;
top:-4px;
颜色:红色;
右:-4px;
}
span.num {
位置:绝对;
字体大小:0.3em;
top:1像素;
颜色:#fff;
右边: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>
I have a notification icon (font-awesome) which shows the number of notifications.
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.
解决方案
example1: using background image
The best way to do this is to use position:absolute
to child span of parent anchor.
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
If you want to use font-awesome icon
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>
这篇关于在图标上显示通知数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文