Badges are special awards that administrators of community sites can give to those members they feel have given extra efforts in the community. Once a member receives a badge it is displayed throughout the site like this:
Badges are nothing more then items in a list that contain just one field (Badge name). Administrators can add new badges or modify existing ones in that list. The list is also called Badges and is created automatically in your community site.
For example my Badges list contains two badges:
Then upload them somewhere to SharePoint where you can reach them from your community site (I have uploaded them to the Site Assets library of my community site). To make the solution more generic be sure to name your images with the same name of the badge they are representing (like Professional and Expert in my case).
Be sure to match your image extension if it is different from .jpg.
Also we will override two css styles, one for the image (.ms-comm-giftedBadgeIcon) and one for the text of the badge (.ms-comm-giftedBadgeText) to make any necessary adjustments (most likely image size).
This are my styles (I have also added them to my site master):
And here is my end result: