> bower install badgerly --save

• Integrates easily with Font Awesome!
• Fully implemented in CSS 3, no spacer images or other hackery.
• Simple to use CSS classes which can be extended.
• Implemented in SCSS, also available in plain CSS for your convenience.

• angular-badgerly - Adds directive support for Badgerly, making it even easier (somehow) to create badges!

Gold, Silver, Bronze

Tiny, Small, Medium, Large, Huge

Red, Orange, Yellow, Green, Blue, Purple, Pink, Black, Rainbow, and a bunch of country flags!

Supports either a single ribbon or a lanyard with two visible ribbons.

  <div class="badge large">
    <div class="ribbon purple">
    </div>
    <div class="circle silver border">
      <i class="fa fa-tree"></i>
    </div>
  </div>

  <div class="badge large">
    <div class="lanyard">
      <div class="ribbon left red"></div>
      <div class="ribbon right red"></div>
    </div>
    <div class="diamond gold border">
      <i class="fa fa-star"></i>
    </div>
  </div>

Contributions and pull requests are welcome! Here are instructions on how to build the project:

• Make changes in the badgerly.scss file.
• Then, run npm install followed by gulp sass to transpile the SCSS file into CSS.
• Push the your changes to your fork and submit a PR.

• Badger icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY