Badges

[Ganzuelo]

Off course! I'm not looking to profit from any of it.

[Ganzuelo]

@o9k What's the ideal size your looking for the badges? Also the icon list your using. Is it part of Font Awesome?

[Ganzuelo]

Here are some examples that I was thinking of. Simple and Clean with funky colors. All icons are from Font Awesome OR we can use The Noun Project's icons..

[a_5mith]

@Ganzuelo said:

The Noun Project's icons..

Definitely this.

[Ganzuelo]

I like the Noun Project however you are limited on the amount of public domain icons available or you have to give attribution.

[a_5mith]

@Ganzuelo Yeah just noticed the licensing bits. Maybe not then.

[baris]

Yeah we use fontawesome.

[Ganzuelo]

24 Badges that require no Attribution.
Duplicated badges with II, III are meant as levels.
They are full vector images and can be scaled.
Images in the file are at 100x100px.
Download:
https://www.dropbox.com/s/oqcbhghhpdjmwxx/badges.ai

[trevor]

Those are perfect!
But what is that blue ring around the star icon and that lime green text...

[Ganzuelo]

I did a screen shot and my mouse was over a shape.

[julian]

@Ganzuelo Nice, I love them! It makes me wonder if it is do-able in just HTML and CSS...

Ta-dah!

[Ganzuelo]

I'm not too familiar with using CSS for images other than resizing. CSS Tricks had a good write up on CSS vs SVG.

Inline SVG Vs Icon Fonts [CAGEMATCH] | CSS-Tricks

If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites.

CSS-Tricks (css-tricks.com)

On another note, your all probably aware of Achievements for Wordpress. (The guy works on Buddypress). You upload the graphic for the achievement and assign in a select amount of karma points and base it off an event like total post count, uploading avatar and so on. In the user panel the admin can check off which badges can be assigned and in the frontend the user will receive a light box notification of the award.

Could we tie the badges app into the reputation program you have here?

[Ganzuelo]

Lol just saw the CSS you did. That looks great! That didn't take long did it? Can that be built into the backend so admin can create on the fly?

[trevor]

CSS? Yeah, should be simple enough. Looks like FontAwesome, icons (some of them at least, not sure about the mustache) but yes.
This is what it would look in HTML just to give you an idea.

<a href="#" class="btn btn-icon b-2x btn-bg-trophy btn-rounded">
   <i class="fa fa-trophy"></i>
</a>

So I'll explain;
btn is the standard class for a button.
btn-icon its a button that will hold an icon.
b-2x double the size of the icon by 2 times.
btn-bg-{} change the background color for Trophies (or whatever the badge name is)
btn-circle add a circular border-radius of 999em (yes I use em instead of % though it should be standard in BS3 as %)

Perhaps an extra class to add the border around the like border-colorName .

[Ganzuelo]

Is it possible to add a generator inside the plugin itself to create badges on the fly?

[trevor]

@Ganzuelo said:

Is it possible to add a generator inside the plugin itself to create badges on the fly?

That would be ideal.

[trevor]

Oh I just saw @julian's Fiddle, pretty simple.
Okay so even better, I'll tweak that.

EDIT [1]: http://jsfiddle.net/3EKz5/1/

So this is scalable in my opinion:
Theres a default badge class for the badges
We should use another class to overwrite this for different badges per name.
And another class name for badge degrees (levels or whatever you'd like to call em). http://jsfiddle.net/3EKz5/3/

EDIT [2]:
So lets tie all of this together and we get a pretty scalable solution: http://jsfiddle.net/3EKz5/4/

EDIT [3]:
Sorry guys, heres the last one here that shows scalability. I opt to use the CSS3 scale in this case as an example.
http://jsfiddle.net/3EKz5/5/

Pheww, that was fun.

[julian]

Was just throwing ideas out there, but glad to see it's received well. I think HTML+CSS badges would be infinitely more scalable than images (less data xfer as well).

[Tanner]

I'm really liking the CSS + Font Awesome badges and how they're turning out. Also like the idea of being able to change them on the fly rather than have them be static content. Great work guys!

[A Former User]

I see a facebook badge/icon there.

If there was a badge option for sharing topics on facebook, that would be the first badge of that type I've ever seen. And possibly something that would help spread NodeBB.