How to add x icon at check-box

Question

I need to add a X at the check-box that is not active, I can add when it is active the V. I’m using the íon Framework to assist me in styling. Follow the code of check:

<li class="item item-checkbox widget uib_w_70 d-margins colorGeral" data-uib="ionic/checkbox" data-ver="0">
   <label class="checkbox">
      <input id="testeeeee" type="checkbox">
   </label>checkbox</li>

This is the icon I need:

ion-android-close

Answer 1

I have no experience with Ionic, but until someone with more experience can give you an answer, here’s a tip on how to do it with CSS.

I used the following icon font (maybe it’s the same as Ionic, but I couldn’t find the icon with the name you mentioned).

• Ionicons

The first step was to get the code they use in the pseudo element to insert the source.

For that I inspected the source element and checked what was in his content

In this case I got the following content: "\f404"; which is what we use to add the "".

I repeated the same steps to catch the ""

The rest is just stylization.

Follow the code I made

.checkbox {
  border: #ccc 1px solid;
  font: 300 1em 'Open Sans', sans-serif;
  margin: 1em 0;
  padding: 1em;
}

.checkbox label {
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
}

.checkbox input[type="checkbox"] + label::before {
  content: "\f404";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e74c3c;
  font-family: "Ionicons";
  color: #fff;
  display: inline-block;
  line-height: 20px;
  text-align: center;
  margin-right: .5em;
}

.checkbox input[type="checkbox"]:checked + label::before {
  content: "\f3fd";
  background-color: #2ecc71;
}

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

<link href="https://cdn.jsdelivr.net/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

<div class="checkbox">
  <input type="checkbox" id="checked" checked>
  <label for="checked">Checkbox</label>
</div>

<div class="checkbox">
  <input type="checkbox" id="unchecked">
  <label for="unchecked">Checkbox</label>
</div>

And here a Fiddle containing the same code

https://jsfiddle.net/Wagner/r55qt2x9