Replace the Check in A CheckBox with An Icon


#1

I’m looking to convert a “checkbox” into an “x-box” - LOL.

Basically, I’m trying to replace the “check” with an “x”. However, I can’t even figure out how the check itself gets in there.

Here’s the SASS for it :

// the checkmark within the box
.checkbox input:after,
.checkbox-icon:after {
  @include transition(opacity .05s ease-in-out);
  @include rotate(-45deg);
  position: absolute;
  top: 30%;
  left: 26%;
  display: table;
  width: ($checkbox-width / 2) + 1;
  height: ($checkbox-width / 3) + 1;
  border: $checkbox-check-width solid $checkbox-check-color;
  border-top: 0;
  border-right: 0;
  content: ' ';
  opacity: 0;
}

Does anyone have ideas for this? I tried putting something like \f129 in the content, but that does not work.

Is that “check” really just a stylized, native checkmark and not an icon?


#2

Notice how it (the :after element) has a border set, but then the top and right is set to 0? So basically, that creates a box with only a bottom and left border, an L shape basically. IT is then rotated 45 degrees, creating the look of the check box.

So to answer your question, nope. No icon there.


#3

Thanks for the explanation. That got me in the right direction.

I’ve come up with this:

http://jsbin.com/fuvaw/10/

It’s UGLY CSS. Hopefully the Ionic devs can make this much better.

I’ve put in a feature request : https://github.com/driftyco/ionic/issues/1997