1

Ok, there was a similar thread here but the answer does not provide a solution.

I have created an icon font with custom icons through fontastic.me and it worked well until I added one more icon, updated my css and font files, and now, I get the character "E" where I want my new icon. The other custom icons are still showing up fine.

Published site displaying this

What's extra strange to me is that when I'm "customizing" through the UI (shopify), the icon DOES show up correctly. Correctly rendering icon image - this makes me think that it's a permissions thing? But I can't figure out how to change the permissions for the font files. Any ideas?

Nothing related the fonts is showing up as an error in the console.

CSS:


@font-face {
  font-family: 'ob-ecomm-icons';
  src:  url('ob-ecomm-icons.eot');
  src:  url('ob-ecomm-icons.eot#iefix') format('embedded-opentype'),
    url('ob-ecomm-icons.ttf') format('truetype'),
    url('ob-ecomm-icons.woff') format('woff'),
    url('ob-ecomm-icons.svg#ob-ecomm-icons') format('svg');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+00-FFFF;
}

.ob-icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'ob-ecomm-icons' !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;
}

[data-icon]:before {
  font-family: "ob-ecomm-icons" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: bold !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="ob-icon-"]:before,
[class*=" ob-icon-"]:before {
  font-family: "ob-ecomm-icons" !important;
  font-style: normal !important;
  font-weight: bold !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ob-icon-ob-help:before {
  content: "\41";
}
.ob-icon-ob-boot-1:before {
  content: "\45";
}

HTML:

<!-- Working: -->
<span class="ob-icons ob-icon-ob-help"></span>

<!-- Not working: -->
<span class="ob-icons ob-icon-ob-boot-1"></span>
itsanolive
  • 9
  • 1
  • have you tried to look in another computer and/or on an incognito window (ctrl+shift+n on chrome)? This looks to me like a caching issue. – Henrique Erzinger Oct 17 '19 at 18:17
  • I have tried on my phone and in incognito - still comes up with an E for that icon... and I updated the icon like at least a week ago. – itsanolive Oct 17 '19 at 19:47
  • Can you open the console and check if the fonts are loading properly ( there will be errors that the fonts are not loaded ). It's possible that the fonts are installed on your PC and that are you grabbing them from your local machine, while the others can't since the fonts are not loaded. – drip Oct 18 '19 at 06:03
  • As stated above, nothing showing up in console related to fonts. The fonts have been uploaded on the server for weeks. – itsanolive Oct 18 '19 at 17:40
  • And if they weren't loaded on the server, none of the icons would work, not just this one. – itsanolive Oct 18 '19 at 17:40

0 Answers0