$icon-palette: $foundation-palette !default;

[class^="#{$fi-font-prefix}-"],
[class*=" #{$fi-font-prefix}-"] {

  display: inline-block;
  font-family: $fi-font-family;
  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;

  /* Support webicon size =========== */
  width: $fi-font-size-base;
  height: auto;
  vertical-align: inherit;

  // Colors
  @each $name, $color in $icon-palette {
    &.#{$name} {
      color: $color;
    }
  }
}