Version 5 Icons vs. Version 4 Icons

[GoGators]

Not a fan of the small icons in the new themes in 5

What made Invision board great to me was its big and bold look it had since I purchased it back in June of 2011.  I know it is subjective, but I feel the small, capitalized fonts and small icons deter from that signature Invision board look/appeal.  Other aspects of the theme are great, but don't feel tiny icons enhance the theme whatsoever.

I hope you give us an option to display version 4 icon set on release.  (This also applies to the side bar as well, because those icons do not stand out either (too small)

The old theme was just perfect. 

\

Thanks for listening...

Edited January 3 by GoGators

[Ehren]

Hi @GoGators

Since these are just FontAwesome icons, you can change them (or resize them) however you like with a sprinkle of CSS 🙂 

[Mike G.]

7 hours ago, Ehren said:

Hi @GoGators

Since these are just FontAwesome icons, you can change them (or resize them) however you like with a sprinkle of CSS 🙂 

That’s great to know. Thanks, @Ehren!

[Drewfus]

I change the size and shape of mine in the  theme editor.

not sure if this is how its done but worked for me.

.fa-bell  {
  --far: "\f0f3";  
--icon: '\f0f3';
  color: white;
opacity: .5;
  min-width: 1.2em;
  text-align: center;
font-weight: 900;
font-size: 20px;
}
.fa-classic, , .far-solid, .fas {
  font-family: "Font Awesome 6 Free";
}
.fa-envelope {
  --fa: "\f0e0";
  --fa--fa: "\f0e0\f0e0";
 color: white;
opacity: .5;
  min-width: 1.2em;
  text-align: center;
font-weight: 900;
font-size: 20px;
}
.fa-flag{
  --fa: "\f071";
  --fa--fa: "\f071\f071";
color: white;
opacity: .5;
  min-width: 1.2em;
  text-align: center;
font-weight: 900;
font-size: 20px;
}
.fa-file-alt, .fa-file-lines, .fa-file-text {
  --fa: "\f15c";
  --fa--fa: "\f15c\f15c";
color: white;
opacity: .5;
  min-width: 1.2em;
  text-align: center;
font-weight: 900;
font-size: 20px;
}

Edited Tuesday at 02:33 PM by Drewfus

[Mike G.]

7 hours ago, Drewfus said:

I change the size and shape of mine in the  theme editor.

not sure if this is how its done but worked for me.

.fa-bell  {
  --far: "\f0f3";  
--icon: '\f0f3';
  color: white;
opacity: .5;
  min-width: 1.2em;
  text-align: center;
font-weight: 900;
font-size: 20px;
}
.fa-classic, , .far-solid, .fas {
  font-family: "Font Awesome 6 Free";
}
.fa-envelope {
  --fa: "\f0e0";
  --fa--fa: "\f0e0\f0e0";
 color: white;
opacity: .5;
  min-width: 1.2em;
  text-align: center;
font-weight: 900;
font-size: 20px;
}
.fa-flag{
  --fa: "\f071";
  --fa--fa: "\f071\f071";
color: white;
opacity: .5;
  min-width: 1.2em;
  text-align: center;
font-weight: 900;
font-size: 20px;
}
.fa-file-alt, .fa-file-lines, .fa-file-text {
  --fa: "\f15c";
  --fa--fa: "\f15c\f15c";
color: white;
opacity: .5;
  min-width: 1.2em;
  text-align: center;
font-weight: 900;
font-size: 20px;
}

Thanks for sharing this, @Drewfus. I love the way those look in dark mode, but it blends in with the background in light mode for me. Does it do the same for you?

[Ehren]

You probably don't want to overwrite every bell icon on the site (for example), just the user panel ones @Drewfus. This code is much safer:

/* Larger, bolder user panel icons */
.ipsUserNav__icon{
	font-weight: 900;
	font-size: 18px;
}

 

[Drewfus]

@Ehren That worked better and was easier.

@Mike G. I don't have a light theme sorry I forgot to test on the light theme I have mine off.

[Mike G.]

On 1/7/2025 at 4:45 PM, Ehren said:

You probably don't want to overwrite every bell icon on the site (for example), just the user panel ones @Drewfus. This code is much safer:

/* Larger, bolder user panel icons */
.ipsUserNav__icon{
	font-weight: 900;
	font-size: 18px;
}

 

I removed the bolded line (font-weight) and I've been going back and forth between 17px and 18px font-size for those icons. For such a minor change, I really like the way it feels. Thanks again for this @Drewfus and @Ehren.

Edited Thursday at 07:11 PM by Mike G.