Custom badges

crazycells · 29 May 2023, 18:36

@phenomlab I had to ask ChatGPT 30 times to get this

the codes will be more clear to you than to me but I had to add a “transparent” background color, so that svg can be created with the color you want. otherwise svg is not visible.

I had to remove “text-align” because it is ruining the position of the badge.

And lastly, although there is a checkmark, unfortunately, it stays behind the SVG, so it had to add a checkmark using CSS codes to make it visible and changed its position using z-index. (or something like this )

phenomlab · 29 May 2023, 18:39

@crazycells it’s a lot of effort, but I really like the effect. I’m just wondering if it’s easier to use an actual image?

crazycells · 29 May 2023, 18:37

@phenomlab said in Custom badges:

@crazycells oooohhhhh - I like!!!

that background URL is universal, right? I mean it will always be available and not be deleted?

I used this page to get that: https://fontawesomeicons.com/svg/icons/twitter-verified-badge#ex-tab1

phenomlab · wrote on 29 May 2023, 18:37

@crazycells said in Custom badges:

that background URL is universal, right? I mean it will always be available and not be deleted?

Yes, correct.

crazycells · 29 May 2023, 18:40

@phenomlab I prefer this way, because I would like to change the color of it depending on profession. In our forum, I am not planning to use it for “email verified” users, it will mainly be used for professional users that we host. I can easily edit this depending on the groups.

phenomlab · wrote on 29 May 2023, 18:40

@crazycells That makes sense.

DownPW · 29 May 2023, 19:40

good job @crazycells

I wonder if we could do it for each badge without changing the color of course and keep the color of the original badges.

Curious to see what it would look like

crazycells · 29 May 2023, 22:46

@DownPW said in Custom badges:

good job @crazycells

I wonder if we could do it for each badge without changing the color of course and keep the color of the original badges.

Curious to see what it would look like

no, this does not work. the overlap of a wavy edge circle and a circle becomes a circle. so, you cannot detect any flower shape with this method. The way that I achieved this was by removing the background color (making it transparent by CSS although there is an assigned color for it in ACP) and then creating a new flower shape on top of it by CSS.

phenomlab · 30 May 2023, 00:01

@crazycells just thinking about this. Wouldn’t it be easier to just use font awesome?

Badge Check Classic Solid Icon | Font Awesome

Badge Check icon in the Solid style. Make a bold statement in small sizes. Available now in Font Awesome 6.

fontawesome.com

crazycells · 30 May 2023, 09:55

@phenomlab said in Custom badges:

@crazycells just thinking about this. Wouldn’t it be easier to just use font awesome?

Badge Check Classic Solid Icon | Font Awesome

Badge Check icon in the Solid style. Make a bold statement in small sizes. Available now in Font Awesome 6.

fontawesome.com

as far as I remember, we discussed this before and you mentioned that that badge is not in the free tier.

phenomlab · wrote on 30 May 2023, 09:55

@crazycells Yes, you’re right

Free Icons | Font Awesome

Search all of Font Awesome's free and Open Source icons. Then use them wherever and however you want.

fontawesome.com

phenomlab · 30 May 2023, 15:31

@crazycells This intrigued me somewhat, I won’t lie I decided to take a stab at this myself.

HTML

 <!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="base"></div>
  <div class="inner"><i class="check fa-solid fa-check"></i></div>
</body>
</html>

CSS

 .base {
  left: 100px;
  top: 100px;
  height: 80px;
  width: 80px;
  background: #067acc;
  position: absolute;
  border-radius: 10px;
}
.base:before {
  height: 80px;
  width: 80px;
  background: #067acc;
  content:"";
  position: absolute;
  transform: rotate(-30deg);
  border-radius: 10px;
}
.base:after {
  padding-top: 10px;
  text-align: center;
  vertical-align: middle;
  height: 70px;
  width: 80px;
  background: #067acc;
  content: "";
  position: absolute;
  transform: rotate(30deg);
  border-radius: 10px;
}
.inner {
  color: #000000;
  left: 95px;
  top: 95px;
  position: absolute;
  text-align:center;
  padding-top: 25px;
  width: 90px;
  height: 65px;
  background: #067acc;
  border-radius: 50px;
  background: #067acc; /* Old browsers */
}
.check {
  font-size: 36px;
  color: #ffffff;
}

Here’s the result

Loading...

Please wait while the description loads.

Loading...

crazycells · 30 May 2023, 15:33

@phenomlab is there a problem in the forum?

I refreshed several times, nothing changed…

phenomlab · 30 May 2023, 15:41

@crazycells Sorry, yes. Fixed that now.

crazycells · 30 May 2023, 15:44

@phenomlab it looks very nice but I guess one needs a subscription to use this, right?

I am looking forward to seeing that on the avatars as “verified badge”, please do not forget to share your CSS code for its position when you implement it.

phenomlab · 30 May 2023, 15:49

@crazycells said in Custom badges:

it looks very nice but I guess one needs a subscription to use this, right?

No, there’s no subscription - what do you see ? The CodePen should be public?

crazycells · 30 May 2023, 15:54

@phenomlab yes I can see it very well:

since your code has “/font-awesome/6.4.0/” in it, I assumed you are using pro version.

phenomlab · 30 May 2023, 15:59

@crazycells No, it’s the free version

Loading...

Please wait while the description loads.

Loading...

You only need the check mark itself

crazycells · 30 May 2023, 16:00

@phenomlab great then, are you planning to implement it on this forum?

I need to tailor the code for my forum…

phenomlab · wrote on 30 May 2023, 16:00

@crazycells Yes, I think I probably will.

sudonix

Custom badges

Badge Check Classic Solid Icon | Font Awesome

fontawesome.com

Badge Check Classic Solid Icon | Font Awesome

fontawesome.com

Free Icons | Font Awesome

fontawesome.com

Loading...

Loading...

Loading...

Loading...

Did this solution help you?

Related Topics

NodeBB v4.0.0 — Federate good times, come on!

Nodebb and emails

CSS code customization for the link preview plugin

NodeBB socket with CloudFlare

Add "author" badge to NodeBB posts using either CSS or jQuery

v3 & Harmony diary / thoughts / code snippets

Adjusting the size of boxes in posts-list class

[NodeBB] custom Gravatar image not showing

	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div class="base"></div>
	<div class="inner"><i class="check fa-solid fa-check"></i></div>
	</body>
	</html>

	.base {
	left: 100px;
	top: 100px;
	height: 80px;
	width: 80px;
	background: #067acc;
	position: absolute;
	border-radius: 10px;
	}
	.base:before {
	height: 80px;
	width: 80px;
	background: #067acc;
	content:"";
	position: absolute;
	transform: rotate(-30deg);
	border-radius: 10px;
	}
	.base:after {
	padding-top: 10px;
	text-align: center;
	vertical-align: middle;
	height: 70px;
	width: 80px;
	background: #067acc;
	content: "";
	position: absolute;
	transform: rotate(30deg);
	border-radius: 10px;
	}
	.inner {
	color: #000000;
	left: 95px;
	top: 95px;
	position: absolute;
	text-align:center;
	padding-top: 25px;
	width: 90px;
	height: 65px;
	background: #067acc;
	border-radius: 50px;
	background: #067acc; /* Old browsers */
	}
	.check {
	font-size: 36px;
	color: #ffffff;
	}

sudonix

Custom badges

Badge Check Classic Solid Icon | Font Awesome

fontawesome.com

Badge Check Classic Solid Icon | Font Awesome

fontawesome.com

Free Icons | Font Awesome

fontawesome.com

Loading...

Loading...

Loading...

Loading...

Did this solution help you?

Related Topics

Individual Categories