Kinark / Materialize-stepper

A little plugin that implements a stepper to Materializecss framework.
https://kinark.github.io/Materialize-stepper/
MIT License
227 stars 60 forks source link

Support for Font Awesome icons #72

Open vonNiklasson opened 5 years ago

vonNiklasson commented 5 years ago

Hello and thank you for this package.

I am personally using Font Awesome instead of the built in icon set that MaterializeCSS provides since I feel they have a wider range of icons. Therefore I wrote my own support for Font Awesome icons. I don't know if there's a common request from others (couldn't see any tickets), but I figured I at least provide the code here and if needed I can convert it to sass and make a pull request if there's something that's desired in the future.

Best regards, vonNiklasson

/* Reset some settings for all icons in the stepper */
ul.stepper.fa-stepper .step.done::before,
ul.stepper.fa-stepper .step.wrong::before,
ul.stepper.fa-stepper.horizontal .step.done .step-title::before,
ul.stepper.fa-stepper.horizontal .step.wrong .step-title::before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
  font-size: 14px;
}

/* Set the done icon in vertical to a check mark */
ul.stepper.fa-stepper .step.done::before {
  content: "\f00c";
}

/* Set the wrong icon in vertical to an exclamation point */
ul.stepper.fa-stepper .step.wrong::before {
  content: "\f12a";
}

@media only screen and (min-width: 993px) {
  /* Set the done icon in horizontal to a check mark */
  ul.stepper.fa-stepper.horizontal .step.done .step-title::before {
    content: "\f00c";
  }
  /* Set the wrong icon in horizontal to an exclamation point */
  ul.stepper.fa-stepper.horizontal .step.wrong .step-title::before {
    content: "\f12a";
  }
  /* Hide vertical icon on horizontal */
  ul.stepper.fa-stepper .step.done::before,
  ul.stepper.fa-stepper .step.wrong::before {
    content: none;
  }
}