1

I am looking for how to override the design of the ant design checkbox to be able to add my own icon as the "tick" mark. I want to use a font awesome icon to replace the standard "tick" mark. Can anyone help with this? I am using Reactjs to create this on the frontend.

https://ant.design/components/checkbox/

lavy093
  • 11
  • 2
  • You'll need to consult the documentation, ask the creator for support, or dive and hack into the code. I don't think this is intended functionality. – tobiv Oct 01 '20 at 20:24

1 Answers1

1

To do so, I mixed sources from: CodePen Demo custom box

With: Use Font Awesome icon as CSS content

To make story short, you need to custom your child element label. Because you wont be able to customize directly the input. So just get the content of your font awesome and modify there:

[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  font-family: "Font Awesome 5 Free"; /**** Need this ****/
  content: "\f095";                   /**** Need this ****/
  font-weight:900;                    /**** Need this ****/
  position: absolute;
  top: .15em; left: .22em;
  font-size: 1.3em;
  line-height: 0.8;
  color: #09ad7e;
  transition: all .2s;
  /*font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;*/
}

DEMO:

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.25em; height: 1.25em;
  border: 2px solid #ccc;
  background: #fff;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  font-family: "Font Awesome 5 Free";   /**** Need this ****/
  content: "\f095";                     /**** Need this ****/
  font-weight:900;                      /**** Need this ****/
  position: absolute;
  top: .15em; left: .22em;
  font-size: 1.3em;
  line-height: 0.8;
  color: #09ad7e;
  transition: all .2s;
  font-family: 'Font Awesome 5 Free', 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 2px dotted blue;
}

/* hover style just for information */
label:hover:before {
  border: 2px solid #4778d9!important;
}






/* Useless styles, just for demo design */

body {
  font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
  color: #777;
}
h1, h2 {
  margin-bottom: .25em;
  font-weight: normal;
  text-align: center;
}
h2 {
  margin: .25em 0 2em;
  color: #aaa;
}
form {
  width: 7em;
  margin: 0 auto;
}
.txtcenter {
  margin-top: 4em;
  font-size: .9em;
  text-align: center;
  color: #aaa;
}
.copy {
 margin-top: 2em; 
}
.copy a {
 text-decoration: none;
 color: #4778d9;
}
<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet"/>
<head>
  <link rel="stylesheet" type="text/css" href="">
</head>

<body>
  <h1>Custom checkboxes with CSS only</h1>
  <h2>"automatic" fallback for IE</h2>


  <form action="#">
    <p>
      <input type="checkbox" id="test1" />
      <label for="test1">Red</label>
    </p>
    <p>
      <input type="checkbox" id="test2" checked="checked" />
      <label for="test2">Yellow</label>
    </p>
    <p>
      <input type="checkbox" id="test3" checked="checked" disabled="disabled" />
      <label for="test3">Green</label>
    </p>
      <p>
        <input type="checkbox" id="test4" disabled="disabled" />
        <label for="test4">Brown</label>
    </p>
  </form>



  <p class="txtcenter">Custom styles on modern browsers.<br/>Classical checkboxes on IE8 and lower.</p>

  <p class="txtcenter copy">by <a href="https://twitter.com/geoffreycrofte">@geoffreycrofte</a><br />see also <a href="https://codepen.io/CreativeJuiz/pen/zqKtp">Flat UI Styles for Checkboxes</a></p>
</body>
MaxiGui
  • 6,190
  • 4
  • 16
  • 33