Skip to content

Commit 70d2f7b

Browse files
tsonevntsonevn
authored
Merge pull request #367 from NativeScript/niliev/fonts
docs: update Icon Fonts article
2 parents 2866529 + 4ce5e73 commit 70d2f7b

File tree

32 files changed

+161
-121
lines changed

32 files changed

+161
-121
lines changed

‎app/app.css

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,13 @@
1-
@import '~nativescript-theme-core/css/core.light.css';
1+
@import '~nativescript-theme-core/css/core.light.css';
2+
3+
.fa {
4+
font-family: "Font Awesome 5 Free", "fa-regular-400";
5+
}
6+
7+
.fa-brands {
8+
font-family: "Font Awesome 5 Brands", "fa-brands-400";
9+
}
10+
11+
.fa-solid {
12+
font-family: "Font Awesome 5 Free", "fa-solid-900";
13+
}

‎app/common-screens-category/dataentry/dataentry-signup/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.icon{
2-
font-family: 'icomoon';
2+
font-family: 'IcoMoon-Free';
33
}

‎app/common-screens-category/dataentry/dataentry-sociallogin/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.icon{
2-
font-family: 'icomoon';
2+
font-family: 'IcoMoon-Free';
33
}

‎app/common-screens-category/dataentry/dataentry-welcome/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.icon{
2-
font-family: 'icomoon';
2+
font-family: 'IcoMoon-Free';
33
}

‎app/css/core.dark.android.css

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

‎app/css/core.dark.ios.css

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

‎app/css/core.light.android.css

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

‎app/css/core.light.ios.css

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

‎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/ng-framework-modules-category/file-system/read/read.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, OnInit } from "@angular/core";
2-
import * as imageSource from "image-source";
2+
import * as imageSource from "tns-core-modules/image-source";
33
// >> fs-read-import-code
44
import * as fs from "tns-core-modules/file-system";
55
// << fs-read-import-code

‎app/ng-ui-category/modal-view-ng/modal-view-actionbar/modal-view.component.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
.my-label {
55
border-radius: 5;
66
color: white;
7-
font-family: FontAwesome;
7+
font-family: "fa-regular-400";
88
font-size: 24;
99
vertical-align: middle;
1010
}

‎app/ng-ui-category/modal-view-ng/modal-view-navigation/home-modal-view-content.component.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
.my-label {
55
border-radius: 5;
66
color: white;
7-
font-family: FontAwesome;
7+
font-family: "fa-regular-400";
88
font-size: 24;
99
vertical-align: middle;
1010
}

‎app/ng-ui-category/modal-view-ng/modal-view-navigation/second-modal-view-content.component.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
.my-label {
55
border-radius: 5;
66
color: white;
7-
font-family: FontAwesome;
7+
font-family: "fa-regular-400";
88
font-size: 24;
99
vertical-align: middle;
1010
}

‎app/ng-ui-widgets-category/icon-fonts/basics/basic.component.html

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

‎app/ng-ui-widgets-category/icon-fonts/basics/basic.component.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,4 @@ import { Component } from "@angular/core";
66
styleUrls: ["./basic.css"],
77
})
88

9-
export class BasicIconFontsExampleComponent {
10-
11-
constructor() {
12-
}
13-
}
9+
export class BasicIconFontsExampleComponent { }

‎app/ng-ui-widgets-category/icon-fonts/basics/basic.css

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,29 @@
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 */
618
.border_style{
719
border-width: 5;
820
border-color:black;
921
padding: 5;
1022
margin-bottom: 2;
23+
}
24+
25+
Label {
26+
font-size: 18;
27+
color: #66ccff;
28+
margin: 8;
1129
}

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

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

‎app/ng-ui-widgets-category/icon-fonts/code-behind/codebehind.component.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<GridLayout class="p-15" rows="*" columns="*" sdkExampleTitle sdkToggleNavButton>
22
<!-- >> icon-font-code-behind-html -->
3-
<ListView class="icon list-group" [items]="glyphs">
3+
<ListView [items]="glyphs">
44
<ng-template let-item="item">
5-
<GridLayout class="list-group-item active" rows="* *">
6-
<Label color="#FF6666" class="m-5 icon" fontSize="34" row="0" textWrap="true" text="{{'Icon: ' + item.icon + ' ' }}"></Label>
7-
<Label color="#66ccff" class="m-5" fontSize="18" row="1" textWrap="true" text="{{'Icon code: ' + item.code }}"></Label>
8-
</GridLayout>
5+
<StackLayout orientation="horizontal">
6+
<Label [text]="item.icon" class="ico"></Label>
7+
<Label [text]="item.code" class="m-l-8"></Label>
8+
</StackLayout>
99
</ng-template>
1010
</ListView>
1111
<!-- << icon-font-code-behind-html -->

‎app/ng-ui-widgets-category/icon-fonts/code-behind/codebehind.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import { Component } from "@angular/core";
88
})
99

1010
export class CodeBehindFontsExampleComponent {
11-
public glyphs = [];
11+
glyphs = [];
12+
1213
constructor() {
1314
for (let charCode = 0xe903; charCode <= 0xeaea; charCode++) {
1415
let glyph = {

‎app/ng-ui-widgets-category/icon-fonts/code-behind/codebehind.css

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,27 @@
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.icon {
20+
font-size: 34;
21+
color: #FF6666;
22+
}
23+
24+
Label {
25+
font-size: 18;
26+
color: #66ccff;
27+
}

‎app/ng-ui-widgets-category/icon-fonts/end.md

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +0,0 @@
1-
2-
**API Reference for the** [HtmlView Class](http://docs.nativescript.org/api-reference/modules/_ui_html_view_.html)
3-
4-
**Native Component**
5-
6-
| Android | iOS |
7-
|:-----------------------|:---------|
8-
| [android.widget.TextView](http://developer.android.com/reference/android/widget/TextView.html) | [UILabel](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UILabel_Class/) |

‎app/ng-ui-widgets-category/icon-fonts/image.png

-35 KB
Binary file not shown.

‎app/ng-ui-widgets-category/icon-fonts/overview.md

Lines changed: 46 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,54 @@
1-
2-
# Icon Fonts
3-
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.
1+
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 to be fetched. Images consume memory. Furthermore, bitmap images do not scale well. If scaled up, they lose quality. If scaled down, they 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.
42

53
## Using Icon Fonts in NativeScript
6-
1. Choose or generate an icon font that best matches your needs. Two popular icon fonts are [IcoMoon](https://icomoon.io/) and [Font Awesome](https://fortawesome.github.io/Font-Awesome/).
4+
5+
1. Choose or generate an icon font that best matches your needs. Two popular icon fonts are [IcoMoon](https://icomoon.io/) and [Font Awesome](https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself).
76
2. Once you have downloaded the icon font to your machine, locate the [TrueType](https://en.wikipedia.org/wiki/TrueType) font file with extension **.ttf**.
8-
3. In your NativeScript application **app** folder, create a folder called **fonts** and place the **.ttf** there.
7+
3. In your root application folder (This is the **app** folder for NativeScript Core, and the **src** folder for Angular 6+), create a folder called **fonts** and place the **.ttf** there.
98
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)`.
109

11-
> 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.
10+
> **Note:** While this documentation article is focused on icon fonts, the above workflow is a hundred percent applicable for both **text fonts** and **icon fonts** (except that with text fonts step 4 as they don't include icons but only plain text).
11+
12+
## Platform Specific Font Recognition
13+
14+
There is a conceptual difference in how **.ttf** fonts are recognized on iOS and Android. On Android, the font is recognized by its **file name** while on iOS it is recognized by its **font name**. This means that fonts that are created with a font name which is different from the file name has to be registered with both names in your CSS rule.
15+
16+
```CSS
17+
.fa-brands {
18+
font-family: "Font Awesome 5 Brands", "fa-brands-400";
19+
}
20+
```
21+
22+
In the above example, the `fa-brands-400.ttf` (as downloaded from the FontAwesome site) has a font name `Font Awesome 5 Brands`. With the above CSS, the font is recognized on both iOS (by the font name `Font Awesome 5 Brands`) and Android (by the file name `fa-brands-400`).
23+
24+
> **Note:** There are specific scenarios where the creators of the fonts might have released two differently named `ttf` files but with the same **font** name (see the example below).
25+
26+
|file name | font name |
27+
|-----------|---------------|
28+
|**fa-solid-900.ttf** | Font Awesome 5 Free
29+
|**fa-regular-400.ttf** | Font Awesome 5 Free
30+
31+
Notice that in the above example the **file** names are different, but the registered **font** name is the same (use the **Font Book** application on Mac or the **Control Panel Fonts** section on Windows to see the actual font name). While this is no issue on Android, it renders the second font unusable on iOS. To handle similar cases additional CSS font properties, such as for example `font-weight`, must be added.
32+
33+
```CSS
34+
/*
35+
File name: fa-regular-400.ttf
36+
Font name: Font Awesome 5 Free
37+
*/
38+
.far {
39+
font-family: "Font Awesome 5 Free", "fa-regular-400";
40+
font-weight: 400;
41+
}
42+
43+
/*
44+
File name: fa-solid-900.ttf
45+
Font name: Font Awesome 5 Free
46+
*/
47+
.fas {
48+
font-family: "Font Awesome 5 Free", "fa-solid-900";
49+
font-weight: 900;
50+
}
51+
```
1252

1353

14-
## Icon Font
15-
![icomoon](../img/modules/icon-fonts/icomoon.png "Icomoon")
1654

17-
## Fonts Folder
18-
![icon-fonts](../img/modules/icon-fonts/fonts-folder.png "Fonts Folder")

‎app/ng-ui-widgets-category/progress/setting-progress/setting-progress.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// >> progress-setting-code
22
import { Component } from "@angular/core";
3-
import { Progress } from "ui/progress";
3+
import { Progress } from "tns-core-modules/ui/progress";
44

55
@Component({
66
moduleId: module.id,

‎app/ng-ui-widgets-category/slider/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ button, label, stack-layout {
44
}
55

66
.icon {
7-
font-family: 'icomoon';
7+
font-family: 'IcoMoon-Free';
88
}
99
/* << button-basic-style */
1010

‎app/ng-ui-widgets-category/switch/disable-switch/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@ button, label, stack-layout {
1010
}
1111

1212
.icon {
13-
font-family: 'icomoon';
13+
font-family: 'IcoMoon-Free';
1414
}

‎app/ng-ui-widgets-category/tab-view/title-icon-fonts/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* >> tabview-icon-font-ng-css */
22
.icon{
3-
font-family: 'icomoon';
3+
font-family: 'IcoMoon-Free';
44
}
55
/* << tabview-icon-font-ng-css */

‎app/ng-ui-widgets-category/web-view/basic-web-view/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* >> web-view-basic-css */
22
.icon{
3-
font-family: 'icomoon';
3+
font-family: 'IcoMoon-Free';
44
vertical-align: center;
55
margin: 6;
66
}

0 commit comments

Comments
 (0)