display count in the service portal header menu

[dheeraaj]

Hi All, 

Please see the attached image.

I have a inbox icon on the Service portal header menu. I want to display count of the inbox on it. I am having these count values stored in the table in service now.

I am using the below code to display the inbox icon in the widget HTML. However I am unsure how to display count for this.

<li class="dropdown dropdown-short hidden-xs">

<a target="_blank" href="XXXXXXXXXXXXXXXXXXXXX" class="dropdown-toggle header-icon-menu" >
<i class="fa fa-inbox"></i>

</a>
</li>

Regards,

Dheeraj

[kklosterman · Accepted solution]

https://getbootstrap.com/docs/3.3/components/#badges

https://stackoverflow.com/questions/23790721/overlap-notification-badge-on-glyph-in-bootstrap-3

[dheeraaj]

Thank you for the reply. Will try this and let you know how it goes.

Regards,

Dheeraj

[dheeraaj]

Thank you. Its working good. However I applied a different CSS to fit my needs. 

That being said, the area that got me confused was if we were to add a page/scripted list.

For anyonje trying to implement similar thing, Below is the CSS that I have applied: 

.badge-notify{
display: inline;
padding: .2em .6em .3em;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
position: absolute;
font-size: 12px;
top: 14px;
left: 50%;
border-radius: 1em;
background-color: #d9534f;
}

Regards,

Dheeraj