Custom Checkbox and Radio buttons with icon fonts for Bootstrap 3 - CSS Only

style.scss

/******************************************************************************************
  Custom checkboxes and radios! Use only CSS
  See http://www.andwecode.com/playground-demo/custom-checkbox-with-font-icon/
  Port to SCSS by Julian Xhokaxhiu <info@julianxhokaxhiu.com> (http://julianxhokaxhiu.com)
*******************************************************************************************/
.checkbox,
.radio {
  input {
      opacity: 0;
      position: absolute;
      z-index: 12;
      width: 18px;
      height: 18px;

      & + span {
          position: relative;
          z-index: 11;
          display: inline-block;
          margin: 0;
          line-height: 20px;
          min-height: 14px;
          min-width: 14px;
          font-weight: normal;

          // Basic Checkbox styles
          &:before {
              font-family: fontAwesome;
              font-weight: normal;
              font-size: 11px;
              color: #2091cf;
              content: "\a0";
              background-color: #FAFAFA;
              border: 1px solid #CCC;
              box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
              border-radius: 0;
              display: inline-block;
              text-align: center;
              vertical-align: middle;
              height: 20px;
              line-height: 19px;
              min-width: 20px;
              margin-right: 10px;
              margin-top: -5px;
          }
          &:hover {
              &:before {
                  border-color: #1c7aad;
              }
          }
      }
      &:checked {
          & + span {
              &:before {
                  display: inline-block;
                  content: '\f00c';
                  background-color: #F5F8FC;
                  border-color: #adb8c0;
                  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05),inset 15px 10px -12px rgba(255, 255, 255, 0.1);
              }
          }
          &:active {
              & + span {
                  &:before {
                      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),inset 0px 1px 3px rgba(0, 0, 0, 0.1);
                  }
              }
          }
      }
      &:hover {
          & + span {
              &:before {
                  border-color: #1c7aad;
              }
          }
      }
      &:active {
          & + span {
              &:before {
                  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),inset 0px 1px 3px rgba(0, 0, 0, 0.1);
              }
          }
      }
      &:disabled,
      &[disabled],
      &.disabled {
          & + span {
              &:before {
                  background-color: #DDD !important;
                  border-color: #CCC !important;
                  box-shadow: none !important;
                  color: #BBB;
              }
          }
      }
  }
}
.radio {
  input {
      & + span {
          &:before {
              border-radius: 100%;
              font-family: Arial,Helvetica,sans-serif;
              font-size: 25px;
          }
      }
      &:checked {
          & + span {
              &:before {
                  content: "\2022";
              }
          }
      }
  }
}