tabler / tabler-icons

A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
https://tabler.io/icons
MIT License
18.03k stars 898 forks source link

Allow css/webfont to work out of the box in more settings #1094

Open jourdain opened 5 months ago

jourdain commented 5 months ago

Currently, the CSS set the font-family on the class and omits the :before modifier, which allows other CSS to override it.

Adding the following will fix such issue.

.ti:before {
  font-family:tabler-icons !important;
}

For context, I could skip my add-on CSS if it was part of your CSS.

Looking at the code, it seems that it could be done in tabler-icons/packages/icons-webfront/.build/iconfront.scss

.#{$ti-prefix}, .#{$ti-prefix}:before {
  font-family: $ti-font-family !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Thanks for considering my suggestion.