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 3Jan 3 by GoGators

Hi @GoGators

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

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!

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 January 7Jan 7 by Drewfus

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?

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;
}

 

@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.

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 January 9Jan 9 by Mike G.