Skip to content

docs: update Icon Fonts article #118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 25, 2019
Merged

docs: update Icon Fonts article #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions app/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,16 @@ components that have the btn class name.
.btn {
font-size: 18;
}

.far {
font-family: "Font Awesome 5 Free", "fa-regular-400";
}

.fab {
font-family: "Font Awesome 5 Brands", "fa-brands-400";
}

.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
}

1 change: 1 addition & 0 deletions app/app.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file removed app/fonts/FontAwesome.ttf
View file
Open in desktop
Binary file not shown.
Binary file added app/fonts/IcoMoon-Free.ttf
View file
Open in desktop
Binary file not shown.
Binary file added app/fonts/fa-brands-400.ttf
View file
Open in desktop
Binary file not shown.
Binary file added app/fonts/fa-regular-400.ttf
View file
Open in desktop
Binary file not shown.
Binary file added app/fonts/fa-solid-900.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed app/fonts/icomoon.ttf
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion app/ns-framework-modules-category/fps-meter/basics/basics-ts-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Observable } from "tns-core-modules/data/observable";
import { setBoolean, getBoolean } from "application-settings";
import { setBoolean, getBoolean } from "tns-core-modules/application-settings";
import { Page } from "tns-core-modules/ui/page";
// >> import-fps-meter
import { removeCallback, start, stop, addCallback } from "tns-core-modules/fps-meter";
Expand Down
2 changes: 1 addition & 1 deletion app/ns-framework-modules-category/trace/custom-trace-writer/custom-trace-writer-ts-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { Observable } from "tns-core-modules/data/observable";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { enable, disable, categories, setCategories, messageType, clearWriters, addWriter } from "tns-core-modules/trace";
import { isUndefined } from "utils/types";
import { isUndefined } from "tns-core-modules/utils/types";
import { Page } from "tns-core-modules/ui/page";
// >> trace-create-custom-writer-ts
const array = new ObservableArray();
Expand Down
23 changes: 21 additions & 2 deletions app/ns-ui-widgets-category/icon-fonts/basics/basics-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,27 @@
/* >> icon-font-css-class-def */
.icon{
font-family: icomoon;
.far {
font-family: "Font Awesome 5 Free", "fa-regular-400";
}

.fab {
font-family: "Font Awesome 5 Brands", "fa-brands-400";
}

.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
}

.ico {
font-family: "IcoMoon-Free";
}
/* << icon-font-css-class-def */

Label {
font-size: 34;
color: #66ccff;
margin: 8;
}

.border_style{
border-width: 5;
border-color:black;
Expand Down
95 changes: 24 additions & 71 deletions app/ns-ui-widgets-category/icon-fonts/basics/basics-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,27 @@
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded">
<Page.actionBar>
<ActionBar title="Basics"/>
<ActionBar title="Icon Fonts (via XML)"/>
</Page.actionBar>
<!-- >> icon-font-xml-def -->
<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-xml-def -->
</Page>

<StackLayout class="m-16">
<Label text="Icon Fonts demonstration" class="h3"></Label>

<!-- >> icon-font-xml-def -->
<!-- Using fa-regular-400.ttf -->
<Label text="&#xf019;" class="far"></Label>

<!-- Using fa-brands-400.ttf -->
<Label text="&#xf39e;" class="fab"></Label>

<!-- Using fa-solid-900.ttf with FormattedString -->
<Label class="fas" textWrap="true">
<FormattedString>
<Span text="&#xf053;" fontAttributes="Bold"></Span>
</FormattedString>
</Label>

<!-- Using IcoMoon-Free.ttf -->
<Label text="&#xe904;" class="ico"/>
<!-- << icon-font-xml-def -->
</StackLayout>
</Page>
12 changes: 12 additions & 0 deletions app/ns-ui-widgets-category/icon-fonts/code-behind/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,15 @@ The example shows, how to use setup the `font-family` property via CSS and how t
<snippet id='icon-font-code-behind-code'/>
<snippet id='icon-font-code-behind-code-ts'/>
<snippet id='icon-font-code-behind-css'/>

And the result is:

![sample-app](../img/modules/icon-fonts/sample-app.png "Sample App")

Example for icon font glyphs:

![icomoon](../img/modules/icon-fonts/icomoon.png "Icomoon")

Example for icon font folder location:

![icon-fonts](../img/modules/icon-fonts/fonts-folder.png "Fonts Folder")
21 changes: 19 additions & 2 deletions app/ns-ui-widgets-category/icon-fonts/code-behind/code-behind-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,22 @@
/* >> icon-font-code-behind-css */
.icon{
font-family: icomoon;
/*
File name: IcoMoon-Free.ttf
Font name: IcoMoon-Free
*/
.ico {
font-family: 'IcoMoon-Free';
font-size: 48;
}

/* only for reference, is NOT working in this example (due to wrong glyph codes)
.fa {
font-family: "Font Awesome 5 Free", "fa-regular-400";
font-size: 48;
}
*/
/* << icon-font-code-behind-css */

Label {
margin: 8;
font-size: 32;
}
11 changes: 6 additions & 5 deletions app/ns-ui-widgets-category/icon-fonts/code-behind/code-behind-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
const Observable = require("data/observable").Observable;
// >> icon-font-code-behind-code
function onPageLoaded(args) {
const Observable = require("tns-core-modules/data/observable").Observable;
function pageLoaded(args) {
const page = args.object;
const viewModel = new Observable();

const glyphs = [];
let charCode = 0xe903;
for (; charCode <= 0xeaea; charCode++) {
for (let charCode = 0xe903; 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;
exports.pageLoaded = pageLoaded;
// << icon-font-code-behind-code
18 changes: 9 additions & 9 deletions app/ns-ui-widgets-category/icon-fonts/code-behind/code-behind-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded">
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
<Page.actionBar>
<ActionBar title="Basics"/>
<ActionBar title="Icon Fonts (via code)"/>
</Page.actionBar>
<!-- >> icon-font-code-behind-xml -->
<GridLayout>
<ListView class="icon list-group" items="{{ glyphs }}">
<!-- >> icon-font-code-behind-xml -->
<ListView 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>
<StackLayout orientation="horizontal">
<Label text="{{ icon }}" class="ico"/><!-- the icon (glyph) -->
<Label text="{{ code }}" /><!-- the icon code -->
</StackLayout>
</ListView.itemTemplate>
</ListView>
<!-- << icon-font-code-behind-xml -->
</GridLayout>
<!-- << icon-font-code-behind-xml -->
</Page>
23 changes: 20 additions & 3 deletions app/ns-ui-widgets-category/icon-fonts/code-behind/code-behind-ts-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,22 @@
/* >> icon-font-code-behind-css */
.icon{
font-family: icomoon;
}
/*
File name: IcoMoon-Free.ttf
Font name: IcoMoon-Free
*/
.ico {
font-family: 'IcoMoon-Free';
font-size: 48;
}

/* only for reference, is NOT working in this example (due to wrong glyph codes)
.fa {
font-family: "Font Awesome 5 Free", "fa-regular-400";
font-size: 48;
}
*/
/* << icon-font-code-behind-css */

Label {
margin: 8;
font-size: 32;
}
16 changes: 9 additions & 7 deletions app/ns-ui-widgets-category/icon-fonts/code-behind/code-behind-ts-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import { Observable } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
// >> icon-font-code-behind-code-ts
export function onPageLoaded(args) {
const page: Page = <Page>args.object;
import { Observable, EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";

export function pageLoaded(args: EventData) {
const page = <Page>args.object;
const viewModel = new Observable();
const glyphs = [];
let charCode = 0xe903;
for (; charCode <= 0xeaea; charCode++) {

let glyphs = new Array<Observable>();
for (let charCode = 0xe903; 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-code-behind-code-ts
14 changes: 7 additions & 7 deletions app/ns-ui-widgets-category/icon-fonts/code-behind/code-behind-ts-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded">
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
<Page.actionBar>
<ActionBar title="Basics"/>
<ActionBar title="Icon Fonts (via code)"/>
</Page.actionBar>
<GridLayout>
<ListView class="icon list-group" items="{{ glyphs }}">
<ListView 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>
<StackLayout orientation="horizontal">
<Label text="{{ icon }}" class="ico"/>
<Label text="{{ code }}" />
</StackLayout>
</ListView.itemTemplate>
</ListView>
</GridLayout>
Expand Down
Loading