CODEWITHSUNDEEP
htmlcss
RoyBarOn
RoyBarOn

Reputation: 987

Add fa icon to the base of switch / toggle button

I need to create a toogle \ switch button that looks like this :

enter image description here

I was able to add the sex sign to the button and to the base of it - but since the icon is being added with Before method - then i can't change the it's position or size - be cause the "before" is a reference to the grey base...and not to the icon itself..

Here is the problem : enter image description here As you can see - i can't change the icon position or color - be cause if i'll do - i will change the base grey bar..and not it's icon.....

Here is my html : 

    <div class="cont">

      <div class="material-switch">
        <input id="someSwitchOptionDefault" name="someSwitchOption001" 
       type="checkbox" />
        <label for="someSwitchOptionDefault" class="label-default"></label>
      </div>

    </div>

And here is the css :

      .material-switch > input[type="checkbox"] {
        display: none;
      }

    .material-switch > label {
        cursor: pointer;
        height: 0px;
        position: relative;
        width: 40px;
    }

    .material-switch > label::before{
        content: "\f229";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;

    }
    .material-switch > label::before {
        background: rgb(0, 0, 0);
        box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
        border-radius: 8px;

        height: 16px;
        margin-top: -8px;
        position: absolute;
        opacity: 0.3;
        transition: all 0.4s ease-in-out;
        width: 100px;
    }

    .material-switch > label::after {
        content: "\f222";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        /*--adjust as necessary--*/
        color: #000;
        font-size: 18px;
        background: rgb(255, 255, 255);
        border-radius: 15px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);

        height: 24px;
        left: -4px;
        margin-top: -8px;
        position: absolute;
        top: -4px;
        transition: all 0.3s ease-in-out;
        width: 73px;
    }

     .material-switch > input[type="checkbox"]:checked + label::before {
        background: inherit;
        opacity: 0.5;
     }

     .material-switch > input[type="checkbox"]:checked + label::after {
        background: inherit;
        left: 30px;
     }

     .cont{
      padding:50px;
     }

And here is my Fiddle

Upvotes: 1

Views: 3362

Answers (3)

Sangrai
Sangrai

Reputation: 687

Add this css:

You are using before and after for label. You must use before and after for

.material-switch input + label span::before and after

like this it will solve your problem.

Example:

.material-switch input + label span {
  left: 15px;
  position: relative;
}

.material-switch input + label span::before {
  color: #42c8c2;
  content: "";
  font-family: fontawesome;
  left: -20px;
  position: absolute;
  top: -2px;
}

and when use before and after when input is checked.

Hope this will help you...

Upvotes: 1

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3163

since you are working with fa icons you have to consider working with a simple text, means that if you want the icon to be right aligned you may simply add text-align:right to the icon as following:

.material-switch > label::before {
    content: "\f229";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    text-align: right;
}

same way if you want to change the color just add color:yourColor

UPDATE

check the updated fiddle

Upvotes: 1

Honey
Honey

Reputation: 386

you have to toggle the icon in :before content itself. you need to toggle the content based on the checked value. here is the fiddle update

Upvotes: 1

Related Questions