📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Core

Icon Fonts

Icon Fonts

While bitmap images are great, they present challenges in designing mobile applications. Images increase the size of the application if they are embedded in it. If not, they require additional http requests in order to be fetched. Images consume memory. Furthermore, bitmap images do not scale well. If scaled up, they will lose quality. If scaled down, they will waste space. On the other hand, fonts scale well, do not require additional http requests for each glyph and do not increase memory usage significantly. Icon fonts contain icons instead of alphabet characters and can be used instead of images in mobile applications.

Using Icon Fonts in NativeScript

  1. Choose or generate an icon font that best matches your needs. Two popular icon fonts are IcoMoon and Font Awesome.
  2. Once you have downloaded the icon font to your machine, locate the TrueType font file with extension .ttf.
  3. In your NativeScript application app folder, create a folder called fonts and place the .ttf there.
  4. Follow the instructions on the icon font webpage to determine the hex codes of each font glyph, i.e., icon. Add a Label component to your NativeScript app and bind the Label's text property to a one-letter string generated from the character code of the icon you want to show, i.e., String.fromCharCode(0xe903).

Do not forget to set the Label's font-family to the name of your font either through CSS, XML or code-behind. Remember: Android needs the actual filename (without extension) whereas iOS needs the font name. To be cross-platform-ready, you can provide both.

Icon Font

icomoon

Fonts Folder

icon-fonts

Basics

The example demonstrates, how to use setup the font-family property via CSS and how to define the needed icons via XML.

<ScrollView>
    <GridLayout rows="auto auto auto auto auto auto auto" columns="">
        <StackLayout class="border_style" row="0">
            <Label color="#66ccff" class="m-5 icon" fontSize="34" textWrap="true">
                <FormattedString>
                    <Span text="Icon code: "></Span>
                    <Span text="&#xe903;" fontAttributes="Bold"></Span>
                </FormattedString>
            </Label>
            <Label color="#FF6666" class="m-5" fontSize="18" textWrap="true" text="Icon code: e903" class="icon"/>
        </StackLayout>
        <StackLayout class="border_style" row="1">
            <Label color="#66ccff" class="m-5 icon" fontSize="34" textWrap="true">
                <FormattedString>
                    <Span text="Icon code: "></Span>
                    <Span text="&#xe908;" fontAttributes="Bold"></Span>
                </FormattedString>
            </Label>
            <Label color="#FF6666" class="m-5" fontSize="18" textWrap="true" text="Icon code: e908" class="icon"/>
        </StackLayout>
        <StackLayout class="border_style" row="2">
            <Label color="#66ccff" class="m-5 icon" fontSize="34" textWrap="true">
                <FormattedString>
                    <Span text="Icon code: "></Span>
                    <Span text="&#xe90b;" fontAttributes="Bold"></Span>
                </FormattedString>
            </Label>
            <Label color="#FF6666" class="m-5" fontSize="18" textWrap="true" text="Icon code: e90b" class="icon"/>
        </StackLayout>
        <StackLayout class="border_style" row="3">
            <Label color="#66ccff" class="m-5 icon" fontSize="34" textWrap="true">
                <FormattedString>
                    <Span text="Icon code: "></Span>
                    <Span text="&#xe90c;" fontAttributes="Bold"></Span>
                </FormattedString>
            </Label>
            <Label color="#FF6666" class="m-5" fontSize="18" textWrap="true" text="Icon code: e90c" class="icon"/>
        </StackLayout>
        <StackLayout class="border_style" row="4">
            <Label color="#66ccff" class="m-5 icon" fontSize="34" textWrap="true">
                <FormattedString>
                    <Span text="Icon code: "></Span>
                    <Span text="&#xe914;" fontAttributes="Bold"></Span>
                </FormattedString>
            </Label>
            <Label color="#FF6666" class="m-5" fontSize="18" textWrap="true" text="Icon code: e914" class="icon"/>
        </StackLayout>
        <StackLayout class="border_style" row="5">
            <Label color="#66ccff" class="m-5 icon" fontSize="34" textWrap="true">
                <FormattedString>
                    <Span text="Icon code: "></Span>
                    <Span text="&#xe915;" fontAttributes="Bold"></Span>
                </FormattedString>
            </Label>
            <Label color="#FF6666" class="m-5" fontSize="18" textWrap="true" text="Icon code: e915" class="icon"/>
        </StackLayout>
        <StackLayout class="border_style" row="6">
            <Label color="#66ccff" class="m-5 icon" fontSize="34" textWrap="true">
                <FormattedString>
                    <Span text="Icon code: "></Span>
                    <Span text="&#xe916;" fontAttributes="Bold"></Span>
                </FormattedString>
            </Label>
            <Label color="#FF6666" class="m-5" fontSize="18" textWrap="true" text="Icon code: e916" class="icon"/>
        </StackLayout>
    </GridLayout>
</ScrollView>
.icon{
    font-family: icomoon;
}

Improve this document

Demo Source


Code Behind

The example shows, how to use setup the font-family property via CSS and how to define the needed icons via Code-Behind.

<GridLayout>
    <ListView class="icon list-group" items="{{ glyphs }}">
        <ListView.itemTemplate>
            <GridLayout class="list-group-item active" rows="* *">
                <Label color="#FF6666" class="m-5" fontSize="34" row="0" textWrap="true" text="{{'Icon: ' + icon + ' ' }}" class="icon"/>
                <Label color="#66ccff" class="m-5" fontSize="18" row="1" textWrap="true" text="{{'Icon code: ' + code }}" />
            </GridLayout>
        </ListView.itemTemplate>
    </ListView>
</GridLayout>
function onPageLoaded(args) {
    const page = args.object;
    const viewModel = new Observable();
    const glyphs = [];
    let charCode = 0xe903;
    for (; charCode <= 0xeaea; charCode++) {
        const glyph = new Observable();
        glyph.set("icon", String.fromCharCode(charCode));
        glyph.set("code", charCode.toString(16));
        glyphs.push(glyph);
    }
    viewModel.set("glyphs", glyphs);
    page.bindingContext = viewModel;
}
exports.onPageLoaded = onPageLoaded;
export function onPageLoaded(args) {
    const page: Page = <Page>args.object;
    const viewModel = new Observable();
    const glyphs = [];
    let charCode = 0xe903;
    for (; charCode <= 0xeaea; charCode++) {
        const glyph = new Observable();
        glyph.set("icon", String.fromCharCode(charCode));
        glyph.set("code", charCode.toString(16));
        glyphs.push(glyph);
    }
    viewModel.set("glyphs", glyphs);
    page.bindingContext = viewModel;
}
.icon{
    font-family: icomoon;
}

Improve this document

Demo Source