TW5 checkboxes + Font awesome = success!

[myst...@gmail.com]

I've fought for the last few days to replace the default checkboxes with FA alternatives.

FA doesn't give you a specific way to do it, but there are a lot of tutorials out there, and they all fail to work when applied to TW5.
( actually, one worked okay.. but it did so by breaking the preferred FA method for customizing via class tags. )

I finally had an Ah ha! moment, and realized i had to do this the TW5 way, rather than trying to force it via CSS.
And since in all my searching for  FA checkboxes in TW5 turned up nothing.. I'm posting this here to help the next poor sod who tries to do this.


The Macro: (this one uses a data tiddler, but its easy enough to change to a field)

\define fabox(field:fabox)
  <$reveal type="match" state="$:/Data/$(currentTiddler)$##$field$" text="0" default="0">
    <$checkbox tiddler="$:/Data/$(currentTiddler)$" index="$field$" checked="1" unchecked="0" default="0" class="fabox">
      <i class="fa fa-2x fa-circle-o"></i>
    </$checkbox>
  </$reveal>
  <$reveal type="match" state="$:/Data/$(currentTiddler)$##$field$" text="1">
    <$checkbox tiddler="$:/Data/$(currentTiddler)$" index="$field$" checked="1" unchecked="0" class="fabox">
      <i class="fa fa-2x fa-times-circle-o"></i>
    </$checkbox>
  </$reveal>
\end


The sole required CSS:

.fabox input[type=checkbox] {
    display: none;
}


Hope this helps someone else.