Skip to content

Commit d5620b2

Browse files
NickIlievNickIliev
committed
docs: update Icon Fonts article
1 parent eddeb0e commit d5620b2

23 files changed

+195
-124
lines changed

‎app/app.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,16 @@ components that have the btn class name.
1919
.btn {
2020
font-size: 18;
2121
}
22+
23+
.far {
24+
font-family: "Font Awesome 5 Free", "fa-regular-400";
25+
}
26+
27+
.fab {
28+
font-family: "Font Awesome 5 Brands", "fa-brands-400";
29+
}
30+
31+
.fas {
32+
font-family: "Font Awesome 5 Free", "fa-solid-900";
33+
}
34+

‎app/app.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/fonts/FontAwesome.ttf

-149 KB
Binary file not shown.

‎app/fonts/IcoMoon-Free.ttf

127 KB
Binary file not shown.

‎app/fonts/fa-brands-400.ttf

131 KB
Binary file not shown.

‎app/fonts/fa-regular-400.ttf

39.1 KB
Binary file not shown.

‎app/fonts/fa-solid-900.ttf

204 KB
Binary file not shown.

‎app/fonts/icomoon.ttf

-93.4 KB
Binary file not shown.

‎app/ns-framework-modules-category/fps-meter/basics/basics-ts-page.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Observable } from "tns-core-modules/data/observable";
2-
import { setBoolean, getBoolean } from "application-settings";
2+
import { setBoolean, getBoolean } from "tns-core-modules/application-settings";
33
import { Page } from "tns-core-modules/ui/page";
44
// >> import-fps-meter
55
import { removeCallback, start, stop, addCallback } from "tns-core-modules/fps-meter";

‎app/ns-framework-modules-category/trace/custom-trace-writer/custom-trace-writer-ts-page.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { Observable } from "tns-core-modules/data/observable";
33
import { ObservableArray } from "tns-core-modules/data/observable-array";
44
import { enable, disable, categories, setCategories, messageType, clearWriters, addWriter } from "tns-core-modules/trace";
5-
import { isUndefined } from "utils/types";
5+
import { isUndefined } from "tns-core-modules/utils/types";
66
import { Page } from "tns-core-modules/ui/page";
77
// >> trace-create-custom-writer-ts
88
const array = new ObservableArray();

‎app/ns-ui-widgets-category/icon-fonts/basics/basics-page.css

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,27 @@
11
/* >> icon-font-css-class-def */
2-
.icon{
3-
font-family: icomoon;
2+
.far {
3+
font-family: "Font Awesome 5 Free", "fa-regular-400";
4+
}
5+
6+
.fab {
7+
font-family: "Font Awesome 5 Brands", "fa-brands-400";
8+
}
9+
10+
.fas {
11+
font-family: "Font Awesome 5 Free", "fa-solid-900";
12+
}
13+
14+
.ico {
15+
font-family: "IcoMoon-Free";
416
}
517
/* << icon-font-css-class-def */
18+
19+
Label {
20+
font-size: 34;
21+
color: #66ccff;
22+
margin: 8;
23+
}
24+
625
.border_style{
726
border-width: 5;
827
border-color:black;

‎app/ns-ui-widgets-category/icon-fonts/basics/basics-page.xml

Lines changed: 24 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,27 @@
11
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded">
22
<Page.actionBar>
3-
<ActionBar title="Basics"/>
3+
<ActionBar title="Icon Fonts (via XML)"/>
44
</Page.actionBar>
5-
<!-- >> icon-font-xml-def -->
6-
<ScrollView>
7-
<GridLayout rows="auto auto auto auto auto auto auto" columns="">
8-
<StackLayout class="border_style" row="0">
9-
<Label color="#66ccff" class="m-5 icon" fontSize="34" textWrap="true">
10-
<FormattedString>
11-
<Span text="Icon code: "></Span>
12-
<Span text="&#xe903;" fontAttributes="Bold"></Span>
13-
</FormattedString>
14-
</Label>
15-
<Label color="#FF6666" class="m-5" fontSize="18" textWrap="true" text="Icon code: e903" class="icon"/>
16-
</StackLayout>
17-
<StackLayout class="border_style" row="1">
18-
<Label color="#66ccff" class="m-5 icon" fontSize="34" textWrap="true">
19-
<FormattedString>
20-
<Span text="Icon code: "></Span>
21-
<Span text="&#xe908;" fontAttributes="Bold"></Span>
22-
</FormattedString>
23-
</Label>
24-
<Label color="#FF6666" class="m-5" fontSize="18" textWrap="true" text="Icon code: e908" class="icon"/>
25-
</StackLayout>
26-
<StackLayout class="border_style" row="2">
27-
<Label color="#66ccff" class="m-5 icon" fontSize="34" textWrap="true">
28-
<FormattedString>
29-
<Span text="Icon code: "></Span>
30-
<Span text="&#xe90b;" fontAttributes="Bold"></Span>
31-
</FormattedString>
32-
</Label>
33-
<Label color="#FF6666" class="m-5" fontSize="18" textWrap="true" text="Icon code: e90b" class="icon"/>
34-
</StackLayout>
35-
<StackLayout class="border_style" row="3">
36-
<Label color="#66ccff" class="m-5 icon" fontSize="34" textWrap="true">
37-
<FormattedString>
38-
<Span text="Icon code: "></Span>
39-
<Span text="&#xe90c;" fontAttributes="Bold"></Span>
40-
</FormattedString>
41-
</Label>
42-
<Label color="#FF6666" class="m-5" fontSize="18" textWrap="true" text="Icon code: e90c" class="icon"/>
43-
</StackLayout>
44-
<StackLayout class="border_style" row="4">
45-
<Label color="#66ccff" class="m-5 icon" fontSize="34" textWrap="true">
46-
<FormattedString>
47-
<Span text="Icon code: "></Span>
48-
<Span text="&#xe914;" fontAttributes="Bold"></Span>
49-
</FormattedString>
50-
</Label>
51-
<Label color="#FF6666" class="m-5" fontSize="18" textWrap="true" text="Icon code: e914" class="icon"/>
52-
</StackLayout>
53-
<StackLayout class="border_style" row="5">
54-
<Label color="#66ccff" class="m-5 icon" fontSize="34" textWrap="true">
55-
<FormattedString>
56-
<Span text="Icon code: "></Span>
57-
<Span text="&#xe915;" fontAttributes="Bold"></Span>
58-
</FormattedString>
59-
</Label>
60-
<Label color="#FF6666" class="m-5" fontSize="18" textWrap="true" text="Icon code: e915" class="icon"/>
61-
</StackLayout>
62-
<StackLayout class="border_style" row="6">
63-
<Label color="#66ccff" class="m-5 icon" fontSize="34" textWrap="true">
64-
<FormattedString>
65-
<Span text="Icon code: "></Span>
66-
<Span text="&#xe916;" fontAttributes="Bold"></Span>
67-
</FormattedString>
68-
</Label>
69-
<Label color="#FF6666" class="m-5" fontSize="18" textWrap="true" text="Icon code: e916" class="icon"/>
70-
</StackLayout>
71-
</GridLayout>
72-
</ScrollView>
73-
<!-- << icon-font-xml-def -->
74-
</Page>
5+
6+
<StackLayout class="m-16">
7+
<Label text="Icon Fonts demonstration" class="h3"></Label>
8+
9+
<!-- >> icon-font-xml-def -->
10+
<!-- Using fa-regular-400.ttf -->
11+
<Label text="&#xf019;" class="far"></Label>
12+
13+
<!-- Using fa-brands-400.ttf -->
14+
<Label text="&#xf39e;" class="fab"></Label>
15+
16+
<!-- Using fa-solid-900.ttf with FormattedString -->
17+
<Label class="fas" textWrap="true">
18+
<FormattedString>
19+
<Span text="&#xf053;" fontAttributes="Bold"></Span>
20+
</FormattedString>
21+
</Label>
22+
23+
<!-- Using IcoMoon-Free.ttf -->
24+
<Label text="&#xe904;" class="ico"/>
25+
<!-- << icon-font-xml-def -->
26+
</StackLayout>
27+
</Page>

‎app/ns-ui-widgets-category/icon-fonts/code-behind/article.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,15 @@ The example shows, how to use setup the `font-family` property via CSS and how t
55
<snippet id='icon-font-code-behind-code'/>
66
<snippet id='icon-font-code-behind-code-ts'/>
77
<snippet id='icon-font-code-behind-css'/>
8+
9+
And the result is:
10+
11+
![sample-app](../img/modules/icon-fonts/sample-app.png "Sample App")
12+
13+
Example for icon font glyphs:
14+
15+
![icomoon](../img/modules/icon-fonts/icomoon.png "Icomoon")
16+
17+
Example for icon font folder location:
18+
19+
![icon-fonts](../img/modules/icon-fonts/fonts-folder.png "Fonts Folder")

‎app/ns-ui-widgets-category/icon-fonts/code-behind/code-behind-page.css

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,22 @@
11
/* >> icon-font-code-behind-css */
2-
.icon{
3-
font-family: icomoon;
2+
/*
3+
File name: IcoMoon-Free.ttf
4+
Font name: IcoMoon-Free
5+
*/
6+
.ico {
7+
font-family: 'IcoMoon-Free';
8+
font-size: 48;
49
}
10+
11+
/* only for reference, is NOT working in this example (due to wrong glyph codes)
12+
.fa {
13+
font-family: "Font Awesome 5 Free", "fa-regular-400";
14+
font-size: 48;
15+
}
16+
*/
517
/* << icon-font-code-behind-css */
18+
19+
Label {
20+
margin: 8;
21+
font-size: 32;
22+
}

‎app/ns-ui-widgets-category/icon-fonts/code-behind/code-behind-page.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
const Observable = require("data/observable").Observable;
21
// >> icon-font-code-behind-code
3-
function onPageLoaded(args) {
2+
const Observable = require("tns-core-modules/data/observable").Observable;
3+
function pageLoaded(args) {
44
const page = args.object;
55
const viewModel = new Observable();
6+
67
const glyphs = [];
7-
let charCode = 0xe903;
8-
for (; charCode <= 0xeaea; charCode++) {
8+
for (let charCode = 0xe903; charCode <= 0xeaea; charCode++) {
99
const glyph = new Observable();
1010
glyph.set("icon", String.fromCharCode(charCode));
1111
glyph.set("code", charCode.toString(16));
1212
glyphs.push(glyph);
1313
}
1414
viewModel.set("glyphs", glyphs);
15+
1516
page.bindingContext = viewModel;
1617
}
17-
exports.onPageLoaded = onPageLoaded;
18+
exports.pageLoaded = pageLoaded;
1819
// << icon-font-code-behind-code

‎app/ns-ui-widgets-category/icon-fonts/code-behind/code-behind-page.xml

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded">
1+
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
22
<Page.actionBar>
3-
<ActionBar title="Basics"/>
3+
<ActionBar title="Icon Fonts (via code)"/>
44
</Page.actionBar>
5-
<!-- >> icon-font-code-behind-xml -->
65
<GridLayout>
7-
<ListView class="icon list-group" items="{{ glyphs }}">
6+
<!-- >> icon-font-code-behind-xml -->
7+
<ListView items="{{ glyphs }}">
88
<ListView.itemTemplate>
9-
<GridLayout class="list-group-item active" rows="* *">
10-
<Label color="#FF6666" class="m-5" fontSize="34" row="0" textWrap="true" text="{{'Icon: ' + icon + ' ' }}" class="icon"/>
11-
<Label color="#66ccff" class="m-5" fontSize="18" row="1" textWrap="true" text="{{'Icon code: ' + code }}" />
12-
</GridLayout>
9+
<StackLayout orientation="horizontal">
10+
<Label text="{{ icon }}" class="ico"/><!-- the icon (glyph) -->
11+
<Label text="{{ code }}" /><!-- the icon code -->
12+
</StackLayout>
1313
</ListView.itemTemplate>
1414
</ListView>
15+
<!-- << icon-font-code-behind-xml -->
1516
</GridLayout>
16-
<!-- << icon-font-code-behind-xml -->
1717
</Page>

‎app/ns-ui-widgets-category/icon-fonts/code-behind/code-behind-ts-page.css

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,22 @@
11
/* >> icon-font-code-behind-css */
2-
.icon{
3-
font-family: icomoon;
4-
}
2+
/*
3+
File name: IcoMoon-Free.ttf
4+
Font name: IcoMoon-Free
5+
*/
6+
.ico {
7+
font-family: 'IcoMoon-Free';
8+
font-size: 48;
9+
}
10+
11+
/* only for reference, is NOT working in this example (due to wrong glyph codes)
12+
.fa {
13+
font-family: "Font Awesome 5 Free", "fa-regular-400";
14+
font-size: 48;
15+
}
16+
*/
517
/* << icon-font-code-behind-css */
18+
19+
Label {
20+
margin: 8;
21+
font-size: 32;
22+
}

‎app/ns-ui-widgets-category/icon-fonts/code-behind/code-behind-ts-page.ts

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
1-
import { Observable } from "tns-core-modules/data/observable";
2-
import { Page } from "tns-core-modules/ui/page";
31
// >> icon-font-code-behind-code-ts
4-
export function onPageLoaded(args) {
5-
const page: Page = <Page>args.object;
2+
import { Observable, EventData } from "tns-core-modules/data/observable";
3+
import { Page } from "tns-core-modules/ui/page";
4+
5+
export function pageLoaded(args: EventData) {
6+
const page = <Page>args.object;
67
const viewModel = new Observable();
7-
const glyphs = [];
8-
let charCode = 0xe903;
9-
for (; charCode <= 0xeaea; charCode++) {
8+
9+
let glyphs = new Array<Observable>();
10+
for (let charCode = 0xe903; charCode <= 0xeaea; charCode++) {
1011
const glyph = new Observable();
1112
glyph.set("icon", String.fromCharCode(charCode));
1213
glyph.set("code", charCode.toString(16));
1314
glyphs.push(glyph);
1415
}
1516
viewModel.set("glyphs", glyphs);
17+
1618
page.bindingContext = viewModel;
1719
}
1820
// << icon-font-code-behind-code-ts

‎app/ns-ui-widgets-category/icon-fonts/code-behind/code-behind-ts-page.xml

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded">
1+
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
22
<Page.actionBar>
3-
<ActionBar title="Basics"/>
3+
<ActionBar title="Icon Fonts (via code)"/>
44
</Page.actionBar>
55
<GridLayout>
6-
<ListView class="icon list-group" items="{{ glyphs }}">
6+
<ListView items="{{ glyphs }}">
77
<ListView.itemTemplate>
8-
<GridLayout class="list-group-item active" rows="* *">
9-
<Label color="#FF6666" class="m-5" fontSize="34" row="0" textWrap="true" text="{{'Icon: ' + icon + ' ' }}" class="icon"/>
10-
<Label color="#66ccff" class="m-5" fontSize="18" row="1" textWrap="true" text="{{'Icon code: ' + code }}" />
11-
</GridLayout>
8+
<StackLayout orientation="horizontal">
9+
<Label text="{{ icon }}" class="ico"/>
10+
<Label text="{{ code }}" />
11+
</StackLayout>
1212
</ListView.itemTemplate>
1313
</ListView>
1414
</GridLayout>

0 commit comments

Comments
 (0)