search

NathanWalker / nativescript-ngx-fonticon

Use custom font icon collections seamlessly with NativeScript + Angular.
MIT License
76 stars 39 forks source link

Fonticon not loading correctly. #46

Closed breningham closed 5 years ago

breningham commented 5 years ago

HI i am attempting to use this for a custom fontello font, however i am having some difficulties, as you can see here, the css file is loaded, and seemingly parsed correctly.

JS: Collections to load: safeguard
JS: ----------
JS: Loading collection 'safeguard' from file: ./assets/safeguard.css
JS: icon-heart: '\ue800'
JS: icon-heart-fill: '\ue801'
JS: icon-share: '\ue802'
JS: icon-comment: '\ue803'
JS: icon-share-fill: '\ue804'
JS: icon-comment-fill: '\ue805'
JS: icon-smile: '\ue806'
JS: icon-menu: '\ue807'
JS: icon-facebook-square: '\ue809'
JS: icon-twitter: '\ue80a'
JS: icon-settings: '\ue80b'
JS: icon-log-out: '\ue80c'
JS: icon-back: '\ue80e'
JS: icon-next: '\ue80f'
JS: icon-down: '\ue810'
JS: icon-up: '\ue811'
JS: icon-cancel: '\ue812'
JS: icon-augmented-reality: '\ue813'
JS: icon-photos: '\ue814'
JS: icon-photo: '\ue815'
JS: icon-tick: '\ue816'
JS: icon-facebook-circle: '\ue817'
JS: icon-google-plus-circle: '\ue818'
JS: icon-map: '\ue819'
JS: icon-info: '\ue81b'

However, the fonts do not show when using the pipe, note: Not using fonticon does infact work! i have been looking at this, and what i have found is that despite the above logging, the stored/parsed object inside the TNSFontIconService service, everything seems to be stored as "/u0000"

contents of TNSFontIconService.css.safeguard: 

{
  "icon-heart": "\u0000",
  "icon-heart-fill": "\u0000",
  "icon-share": "\u0000",
  "icon-comment": "\u0000",
  "icon-share-fill": "\u0000",
  "icon-comment-fill": "\u0000",
  "icon-smile": "\u0000",
  "icon-menu": "\u0000",
  "icon-facebook-square": "\u0000",
  "icon-twitter": "\u0000",
  "icon-settings": "\u0000",
  "icon-log-out": "\u0000",
  "icon-back": "\u0000",
  "icon-next": "\u0000",
  "icon-down": "\u0000",
  "icon-up": "\u0000",
  "icon-cancel": "\u0000",
  "icon-augmented-reality": "\u0000",
  "icon-photos": "\u0000",
  "icon-photo": "\u0000",
  "icon-tick": "\u0000",
  "icon-facebook-circle": "\u0000",
  "icon-google-plus-circle": "\u0000",
  "icon-map": "\u0000",
  "icon-info": "\u0000"
}

So clearly something has gone wrong when storing/parsing the CSS File.

breningham commented 5 years ago

My issue seems to be two things, the css file not using double quotes for the content, and that the classes for the font are all 'icon-' instead of 'safeguard' (the name of the font.)