0

We recently successfully upgraded to Font Awesome 5, or so we thought.

The strange problem we're having is that some FA5 icons don't show up, but only sometimes. That is, on some pages the icon is there, but on others it's not.

Everything worked A OK locally and on our testing server. It's just on our production server that we see this.

We set all icons the same way, with a mixin:

@mixin icon(
  $name
) {
  $font-icon: map-get($font-icons, $name);

  @if $font-icon {
    font-family: 'Font Awesome 5 Free';

    content: fa-unicode($font-icon);
    font-weight: fa-weight($font-icon);
  } else {
    // use an image, deleted to keep it short
  }

where $font-icons maps between a name and a tuple of the FontAwesome unicode and font-weight:

$font-icons: (
  filter: ($fa-var-filter, 900),
  // etc etc

$fa-var-filter is defined in Font Awesome's _variables.scss as $fa-var-filter: \f0b0;.

for completeness, here are the two helper functions:

@function fa-unicode($font) {
  @return unquote("\"#{ nth($font, 1) }\"");
}

@function fa-weight($font) {
  @return nth($font, 2)
}

In thinking about how this mechanism can have such different results on the same page, I'm leaning towards something breaking compass's or sass's compilation. But really haven't the foggiest.

ari gold
  • 2,074
  • 3
  • 25
  • 51
  • 1
    What’s the difference in the compilation between the so called local and production? Production is a minified version? Which compiler are you using? Do you compile local and then deploy to server or the files are compiled server side? – muecas May 25 '18 at 02:58
  • I am having the same issue on Chrome...I have a font awesome 5 layer that shows a file icon and then an overlayed paperclip icon when the file is attached. The html looks exactly the same on the ones that show and the ones that don't, but I cannot figure out why this is happening – MattE Jun 08 '18 at 14:35

0 Answers0