Technical Details

Forum version : #Unspecified
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Other
Who the problem concerns : All members
Forum link : http://uniquecitizens.forumotion.com

Description of problem

I have issue of icons for the award systems for something like this

Since it use css code to change the icons. Below is the css code share by @Ange Tuteur in this post https://help.forumotion.com/t154916-award-selector#1064917

Code:

/* -- award css -- */
.postprofile .fmd_awards {
  display:block;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.postprofile .fmd_awards tbody { display:block; }
 
.fmd_awards td {
  color:#FFF;
  background:#69C;
  height:32px;
  width:32px;
  border-radius:100px;
  position:relative;
  display:inline-block;
  text-align:center;
  line-height:32px;
  font-size:18px;
  margin:1px;
  cursor:default;
}
 
.a_member:before { content:"\f00c"; } /* registered */

Hi there,

I'm pretty sure you have to use your own icons since the ones in that screenshot are copyrighted to Ange's forum.

Alright

I mean you can wait for clarification from @Ange Tuteur if you want to so you can use the same ones or not. I'm just stating my answer.

Draxion wrote:I mean you can wait for clarification from @Ange Tuteur if you want to so you can use the same ones or not. I'm just stating my answer.

I think I have seen the tricks he used....

Thanks for your reply....

Hi,

Just for clarification the icons and awards system on my forum aren't copyrighted, so anyone can use it really. The icons themselves are from font awesome. (see cheatsheet below) If you're using FA Edge Font Awesome should be installed by default, if not you will have to install it on your forum --> tuto.
https://fontawesome.com/cheatsheet

To create an award with a different icon simply give it a different class, such as "a_apple" for example.

Code:

[td class="a_apple"][/td]

then our css will use the apple icon from font awesome by copying it's code (f179) and use the escape sequence (\) to indicate it's a special character.

Code:

.a_apple:before { content:"\f179"; } /* apple */

compare with the .a_member:before CSS rule to see the difference.

If any questions let us know.

Have a good day.

Thanks @Ange Tuteur, I have solved that issue. My concern now is how to force the award icons to fall below the Title name and not beside the title name in the message profile

bump