How to add x icon in check box

Question

How to add x icon in check box

Navigation

#1 by (3 votes)

1

I need to add a X in the check box that is not active, I can add when it is active V . I'm using íon Framework to help me in styling. Here is the code for 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

css ionic

asked by anonymous 08.10.2015 / 13:28

1 answer

Best practice for dealing with branch sets in SVN Validating form data in ASP.NET MVC

score 3 · Accepted Answer

I have no experience with Ionic, but even someone with more experience can give you an answer, there's the hint of how to do with CSS.

I used the following icon font (maybe the same as Ionic, but I did not 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 font.

For this I inspected the source element and checked what was in the content of it

InthiscaseIgotthefollowingcontent:"\f404"; which is what we used to add the "×".

I repeated the same steps to get the "✔"

The rest is stylized.

Follow the code I've 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's a Fiddle containing the same code

link