Unable to use font icon in NativeScript

Question

I have dowloaded a tff icon from fontello - that I renamed to discard - and placed it in a fonts folder inside app folder of a vanilla ts nativescript project:

In my xml I have this label:

<Label id="label" text="1U+F1F8" class="discard" />

And app.css like so:

.btn {
    font-size: 18;
}

.discard {
    font-family: "discard";
    font-weight: bold;
}

The label display the text when it should display the icon?

The text is the unicode of the tff file which I believe is a requirement as seen in the docs - gotten from font book on Mac:

I have also only tried on android so far - as I then only have to set the file name correctly.

What could be the issue?

I am using react-nativescript in my original project - but looking to get it working in vanilla ts first. Preferably there is a way to do it in the code behind that I can then use in react-nativescript.

Also, [On iOS you should use the font family name](https://docs.nativescript.org/ui/components/icon-fonts#platform-specific-font-recognition), file name may not work. — Manoj, Sep 17 '19 at 16:19

anthares · Accepted Answer · 2019-09-18T10:41:31.470

5

The app is interpreting the Unicode as text, you need to set it as a Unicode literal like this:

<Label text="{{ trashGlyph }}" class="discard"/>

and define the trashGlyph in your ViewModel:

trashGlyph = "\uf1f8"

Alternatively, if Angular is used - this should do the job:

<Label id="label" [text]="'\uf1f8'" class="discard" />

edited Sep 18 '19 at 10:41

answered Sep 17 '19 at 14:54

anthares

11,070
4
41
61

After that nothing is displayed though. So there must be something wrong with my tff. I noticed (on mac) that opening font book to get the unicode - that it prompted me to "install". Is that step necessary? I have never worked with font icons before. – lolelo Sep 17 '19 at 16:55
Using another tff - it will still not display. – lolelo Sep 17 '19 at 17:19
Can you double check whether the glyph you are trying to show is part of the font and the unicode is the correct one? Is this working in web? – anthares Sep 18 '19 at 08:40
I visited http://fontello.com. Downloaded. Dragged .tff file into fonts folder. Don't know how I would test in web. Also updated question with an image. – lolelo Sep 18 '19 at 08:58
My bad, I just noticed you are not using Angular and the syntax above is using the Angular databinding syntax. For TypeScript project, you can try something like: `` and define a variable `trashGlyph = "\uf1f8"` in your view-model for example. – anthares Sep 18 '19 at 10:17
1

Yes that binding worked - as well as `label.text = "\uf1f8";` in code behind! – lolelo Sep 18 '19 at 10:37

score 2 · Answer 2 · answered Sep 19 '19 at 10:19

I am using react-nativescript in my original project - but looking to get it working in vanilla ts first. Preferably there is a way to do it in the code behind that I can then use in react-nativescript.

@anthares clearly has you covered for the NativeScript Core side of the question!

I'll cover the React NativeScript specifics.

Here is a sample repo (actually the repo for the React NativeScript starter template) showing how to integrate fonts into a React NativeScript app (it's probably no different than integrating fonts into a NativeScript Core app). I notice that you're using CSS, incidentally – that repo also shows how to set up for SCSS.

app/components/AppContainer.tsx shows how to use glyph icons in React NativeScript:

<$Label row={0} col={0} className="info" horizontalAlignment="center" verticalAlignment="middle">
    <$FormattedString>
        <$Span className="fa" text="&#xf135;"/>
        <$Span text=" MESSAGE"/>
    </$FormattedString>
</$Label>

EDIT: Note that the glyph icon needn't be inside a FormattedString Span. It could be written directly as <$Label text=""/>, and possibly also <$Label></$Label> depending on how JSX works.

That's how to write it as a static string in JSX, at least. If you write your text property as a dynamic string, however, i.e.:

text={`Some dynamic string`}

... Then you may find that the escaping rules may be different (because it should follow the rules of regular JS syntax in that context). I'd guess that it may behave like code-behind in that context.

Note: It may also be that  isn't the only way to write it in the static context. I just happened to copy-and-paste that from a NativeScript Vue example and it worked as-is, so I went with it.

Unable to use font icon in NativeScript

2 Answers2