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.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 withThe content attributes for them get declared separately, like this:Those are the simple ones.The icons for The makes it twice as long, without displacing anything else. Instant horizontal rule icon (the blue arrow on the right points to it).
TheThat 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 usedOTOH,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.
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:
.format-buttons .button {overflow: hidden;min-width: 4.3rem;min-height: 3rem;max-height: 3rem;line-height: 3rem;padding-inline: 6px 8px;}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:
.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;}Code:
.bbcode-icon::before {content: '\f2b4';}.bbcode-strike::before {content: '\f0cc';}.bbcode-sub::before {content: '\f12c';}.bbcode-sup::before {content: '\f12b';}.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:
.bbcode-hr::before {content: '\f068';transform: scaleX(2);}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:
.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;}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:
#format-buttons {display: flex;flex-wrap: wrap;margin: 5px 0;}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.
Statistics: Posted by Gumboots — Thu Sep 19, 2024 12:37 am