Facebook style counter with Bootstrap and FontAwesome

The little counters in the corner of Facebook icons are really good for letting users of the social networking platform know that there is a message or notification waiting for them. Integrating this into your own application can be done without too much hassle and is well worth it for the usability gains achieved.

It is possible to do this in Bootstrap combined with FontAwesome with little modification to menu items already in use. Lets take a look at the markup for getting this to work.

So we can see that this just provides a basic navigation menu that could be anywhere in an application. The span with a class of .icon_counter contains the counter for that icon. Without styling we end up with the following.

This is all well and good but we want it to look good, rather than just appending the counter to the icon, this is where our style comes in

This produces a much nicer look and feel…

Breaking down the CSS rules we have here and going over them one by one reveals:

  • .icon_counter_red / blue / green – This sets the colour of the counter
  • .icon_counter
    • color – Sets the appropriate colour for the number
    • font-family – On small sized text it is a good idea to manually set a size in case browser’s default font ruins things
    • font-size – Again, manually setting the font size ensures this works regardless of browser
    • font-weight – Making our counter legible by increasing the weight
    • position – Setting absolute positioning allows us to place the counter correctly
    • padding / margin – The padding and margin are used to position the counter bottom right
    • border-radius / box-shadow – Add a slightly more pleasing visual effect to the counters

Feel free to play around and comment with any improvements you come up with.

This post has been viewed 3210 times.

Leave a Reply

Your email address will not be published. Required fields are marked *