Replace the Check in A CheckBox with An Icon

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?

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.

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

1 Like