Replacement content with the checkmark

HTML & CSS
1

I try to make styling for a circle when it is status CHECKED. How to add also checkmark in this case?
As I understand it should be replaced :before with the new content:

    font-family: FontAwesome;
    content: "\f095";

Is this the correct way?

<!DOCTYPE HTML>

<html>

<head>

<title>Toggle switcher</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body>
<!-- - Source:https://www.w3schools.com/howto/howto_css_switch.asp -->
<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider"></span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

</body>
</html>

CSS:

.switch {
 position: relative;
 display: inline-block;
 width: 60px;
 height: 34px;
}
.switch input {
 opacity: 0;
 width: 0;
 height: 0;
}
.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #ccc;
 -webkit-transition: .4s;
 transition: .4s;
}
.slider:before {
 position: absolute;
 content: "";
/*
    font-family: FontAwesome;
    content: "\f095";

*/
 height: 26px;
 width: 26px;
 left: 4px;
 bottom: 4px;
 background-color: white;
 -webkit-transition: .4s;
 transition: .4s;
}
input:checked + .slider {
 background-color: #2196F3;
}
input:focus + .slider {
 box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
 -webkit-transform: translateX(26px);
 -ms-transform: translateX(26px);
 transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
 border-radius: 34px;
}
.slider.round:before {
 border-radius: 50%;
}
5

It is not the same topic. Circle should be include the Checkmark. It is Toggle switcher but
it should be added

/*
    font-family: FontAwesome;
    content: "\f095";

*/

I’m not sure how to work the checkmark inside circle.

6

It would be better if you could make a drawing of what you want as it is unclear what you are trying to do here.

Assuming you have the fontAwesome css in place (or cdn linked to) then you could add a check mark to the code above using the following.

 font-family: FontAwesome;
 content: "\f00c";

e.g.

.slider:before {
  position: absolute;
  content: "";
  font-family: FontAwesome;
  /*content: "\f00c"; default icon state here if you have one*/
  font-size:1.5rem;
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

...
...

input:checked + .slider:before {
  transform: translateX(26px);
  content: "\f00c";
font-size:1.5rem;
}

/f00c is a check mark (tick) in latest fontAwesome I believe. Not sure what the f095 you were using was meant to be as it looked like a telephone. Maybe you have an older version of font awesome or the CDN i linked to was a different version.

Anyway this is what the thing looks like with the code I mentioned.

Screen Shot 2020-06-27 at 14.08.21
Screen Shot 2020-06-27 at 14.08.21725×527 61.8 KB

If you want a smaller checkmark then change the font-size and then center it with flexbox.


font-size:1rem;
  text-align:center;
  height: 26px;
  display:flex;
  justify-content:center;
  align-items:center;
  width: 26px;

Screen Shot 2020-06-27 at 14.23.38

7

It works. This is exactly what I tried to achieve like your images. IMHO it is toggle sometimes confused for visitors. You can not know if this is active status or disabled due to colors (only). If there is a check mark it will show it is status active and also color.

8

Yes that’s why you have to be very careful when you change the default form controls. You also lose a lot of the in-built accessibility features built in to them after years of research. Although these fancy switches look nice I can bet you that the failure rate of forms with those designs are much higher than the default icons.

Therefore I think your idea of placing the checkmark in the ‘on’ state is a good visual clue. :slight_smile:

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.