We've added two more settings for category icons and the icon panels displays:
- Category icon background colors
- The ability to show category descriptions within icon panels
Category icon background colors
When we first built category icons, we assumed people would use colored icons on a white background. But almost as soon as we released the feature, people started asking if they could add a background color to the icon.
While we've had some instructions on changing the color of the entire icon panel through Custom CSS, we also wanted to give you a way to add a color swatch only to the category icon itself.
We've now done that. You'll see the change in two places:
- Settings > Style > Colors now lets you set a default Category Icons Background color
- The Font Awesome icon picker now includes an option for you to select the background color for a given icon (it will pre-populate with whatever your default in Settings > Style is set to).
If you use the background color, it will create a small box of color around the icon only (here's an all-blue example, but the possibilities are endless!):
The backgrounds look particularly nice if you use a white or light-colored icon against a dark background--scroll down just a bit for a sample of that!
Icon panels with category descriptions
We're also excited to announce another quickly-requested addition to icon panels: category descriptions!
When you set a default category to use the icon panels display, we've now added a checkbox that will let you choose to include category descriptions.
The Show category description checkbox will display the category's description beneath the title (the exact color and size will depend on your Style Settings and/or any Custom CSS you've added):
Sample icon panel with category description shown
If you want to check it out, we're using this setup in Security and permissions.
We've updated our Icon panels styles to include CSS to change the font-size and color of those descriptions if you want to have even more fun. We used these to style what you're seeing in Security and permissions, too.😉
And if you're using icon panels on your homepage, you can achieve the same thing by adding ,desc=1 into your merge code.
One quick warning: In our testing, a little category description goes a looooooooooooong way, so you may want to review your category descriptions to make sure they're not too long or visually overwhelming if you use this setting!
