[TIP] Custom button icons

[Gumboots]

I know there is an extension for this (this one) but before I knew about it I wanted to customise some button icons myself, without hacking the template, and I also wanted some that were not possible simply by using one standard FontAwesome icon. These tricks may be useful for other people, and the same principles could be used elsewhere.

First step is you need to hid the default text string so you can put your custom icon in its place. The easiest way is to set a max-height and hidden overflow on the buttons.

Code: Select all

.format-buttons .button {
	overflow: hidden;
	min-width: 4.3rem;
	min-height: 3rem;
	max-height: 3rem;
	line-height: 3rem;
	padding-inline: 6px 8px;
}

The min-width ensures the buttons stay a handy width for fingers on touchscreen, and it also looks good (IMO) on desktop. The asymmetric inline padding is just because with the button styling I was using a symmetric padding gave the illusion that the icon was off centre. Using asymmetric padding counteracts that.

Anyway, once the buttons are set up with the basics, you declare ::before pseudos with display: block; and those automatically shunt the default text out of sight.

Code: Select all

.bbcode-clear::before, .bbcode-hr::before,
.bbcode-icon::before, .bbcode-strike::before,
.bbcode-sub::before, .bbcode-sup::before {
	display: block;
	width: auto;
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	font-family: FontAwesome;
	font-size: inherit;
	line-height: 3rem;
	text-rendering: auto;
	text-align: center;
}

The content attributes for them get declared separately, like this:

Code: Select all

.bbcode-icon::before {
	content: '\f2b4';
}
.bbcode-strike::before {
	content: '\f0cc';
}
.bbcode-sub::before {
	content: '\f12c';
}
.bbcode-sup::before {
	content: '\f12b';
}

Those are the simple ones.The icons for .bbcode-clear::before and .bbcode-hr::before are a bit trickier. FA doesn't include a good icon for an <hr> tag. The closest it has a hyphen. So, do this with it:

Code: Select all

.bbcode-hr::before {
	content: '\f068';
	transform: scaleX(2);
}

The makes it twice as long, without displacing anything else. Instant horizontal rule icon (the blue arrow on the right points to it).

custom_button_icons.jpg

The .bbcode-clear button is for a custom BBCode I made that wraps multiple inline image attachments, so they can display in rows and automatically wrap when necessary (it just sets immediate children to display: inline-block; vertical-align:bottom;). FA has no icon that clearly represents anything close to that. So, get cunning...

Code: Select all

.bbcode-clear::before {
	width: 3.5rem;
	margin: .6rem auto 0;
	padding-right: 1px;
	font-size: 1.3rem;
	line-height: 1.8rem;
	content: '\f03e \f03e';
	outline: 2px solid;
}

That puts two of the standard "img" icons inline, with a box outline, giving a clear representation of what that BBCode does (the blue arrow on the left points to it).

And, just for the heck of it, I used display: flex; on #format-buttons so I could re-arrange the buttons into a more logical order, in terms of what they do. This is good visually, because it makes the button array less confusing for average users (things are where you would expect them to be).

Code: Select all

#format-buttons {
	display: flex;
	flex-wrap: wrap;
	margin: 5px 0;
}

OTOH,it's bad for sighted users who have to rely on keyboard navigation, because the tabbing order no longer matches the visual order. For this particular site everyone uses a mouse anyway (the site is for a game that relies on using a mouse) so it will help rather than hinder them, but it would not be ideal for general public use.

For general public use the best solution would be a built-in way of rearranging the buttons' order in admin, so you could get a logical visual order and a logical tabbing order, but AFAIK nobody has coded that yet.