Forum Badges

A collection of 60 beautiful, customizable forum badges/prefixes

About Forum Badges

Forum Badges is a lightweight, customizable CSS library that provides beautiful badges for forum user roles. With 60 different styles, you can easily implement badges for administrators, moderators, VIPs, and many more user types.

View on GitHub Install via npm

Usage

Using Forum Badges is simple. Include the CSS file in your project, then add the appropriate classes to your HTML elements:

<link rel="stylesheet" href="path/to/forum-badges.min.css">

<span class="fb-badge fb-admin">Administrator</span>
<span class="fb-badge fb-mod">Moderator</span>

All Badges

Here's a showcase of all 60 badge styles included in the library:

Administrative Roles

Administrator .fb-admin
Moderator .fb-mod
Super Moderator .fb-super-mod
Developer .fb-dev
Owner .fb-owner
Staff .fb-staff

Special Status

VIP .fb-vip
Donor .fb-donor
Premium .fb-premium
Sponsor .fb-sponsor
Beta Tester .fb-beta
Partner .fb-partner

Achievement Badges

Veteran .fb-veteran
Expert .fb-expert
Helper .fb-helper
Contributor .fb-contributor
Trusted .fb-trusted
Pioneer .fb-pioneer

Fun Badges

Jester .fb-jester
Ninja .fb-ninja
Wizard .fb-wizard
Hero .fb-hero
Pirate .fb-pirate
Robot .fb-robot

Community Status

New Member .fb-new
Member .fb-member
Regular .fb-regular
Active .fb-active
Elite .fb-elite
Legendary .fb-legendary

Special Animated Badges

Sparkle .fb-sparkle
Glow .fb-glow
Pulse .fb-pulse
Rainbow .fb-rainbow

More Themed Badges

Hacker .fb-hacker
Scientist .fb-scientist
Artist .fb-artist
Musician .fb-musician
Gamer .fb-gamer
Mentor .fb-mentor
Innovator .fb-innovator
Visionary .fb-visionary
Explorer .fb-explorer
Guide .fb-guide
Ambassador .fb-ambassador
Scholar .fb-scholar
Champion .fb-champion
Guru .fb-guru
Founder .fb-founder
Manager .fb-manager
Designer .fb-designer
Tester .fb-tester
Supporter .fb-supporter
Reviewer .fb-reviewer
Builder .fb-builder
Architect .fb-architect
Influencer .fb-influencer
Creator .fb-creator
Strategist .fb-strategist
Leader .fb-leader

Customization

Forum Badges can be customized using CSS variables:

:root {
  --fb-admin-color: #ff5555;
  --fb-admin-bg: #333;
  --fb-anim-speed: 3s;
}

Or using the JavaScript API:

// Include the JS file
<script src="path/to/forum-badges.min.js"></script>

// Initialize with custom options
ForumBadges.init({
  animationSpeed: '3s',
  colors: {
    'primary': '#4a6cf7',
    'secondary': '#f25f5c'
  },
  enableTooltips: true
});