Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for Font Awesome icons #72

Open
vonNiklasson opened this issue Apr 23, 2019 · 0 comments
Open

Support for Font Awesome icons #72

vonNiklasson opened this issue Apr 23, 2019 · 0 comments

Comments

@vonNiklasson
Copy link

vonNiklasson commented Apr 23, 2019

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;
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants