Open youyi1314 opened 6 years ago
I am using the next branch and trying the recommendations here : Slack
I added fa-regular-400.ttf to app/assets/fonts
and then within my styles.scss i have :
@font-face
{
font-family: 'Font Awesome 5 Free';
font-weight: 400;
font-style: normal;
src: url('./assets/fonts/fa-regular-400.ttf');
}
.far,
.fa
{
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}
Within my components data i got:
data() {
return {
fa:{
"windows":"\uf17a",
"cog":"\uf013",
"angry":"\uf556"
}
};
},
And then i do :
<Label class="fa" :text="fa.angry" />
<Label class="fa" :text="fa.windows" />
<Label class="fa" :text="fa.cog" />
What shows up is simply : '
Any idea where i am going wrong?
We also use nativescript-vue
together with nativescript-fonticon
and recently struggled to get it to work with Font Awesome 5 on iOS. First off: The source of this problem is not the fonticon plugin but supposedly NativeScript Core together with Webpack and to some extend the Font Awesome font files.
What we did as a workaround:
Open font file fa-regular-400.ttf with FontForge font editor
Element
> Font Info
> PS Names
: remove spaces in font family name (change from Font Awesome 5 Free
to FontAwesome5Free
)File
> Generate Fonts...
as FontAwesome5FreeRegular.ttf
Open font file fa-solid-900.ttf with FontForge font editor
Element
> Font Info
> PS Names
: remove spaces in font family name (change from Font Awesome 5 Free
to FontAwesome5Free
)Element
> Font Info
> OS/2
: change weight class from 400 Regular
to 900 Black
File
> Generate Fonts...
as FontAwesome5FreeSolid.ttf
FontAwesome5FreeRegular.ttf
and FontAwesome5FreeSolid.ttf
are copied to folder dist/app/fonts
during build (we use copy-webpack-plugin
for that purpose). Font files in this folder will automatically be registered as system fonts by the nativescript runtime.fa,
.fas {
font-family: FontAwesome5Free, FontAwesome5FreeSolid;
font-weight: 900;
}
.far {
font-family: FontAwesome5Free, FontAwesome5FreeRegular;
font-weight: 400;
}
On iOS NativeScript choses the font to use from the combination of font family name (FontAwesome5Free
) and font weight (900
for solid icons, 400
for regular icons). Both need to match the meta data defined in the font file (tns-core-modules/ui/styling/font.ios.ts). When there are spaces inside the font name, NativeScript (or webpack?) seem to escape the space before the char 5
which prevents the css rule to match the installed system fonts.
On Android NativeScript choses the font to use from the font file name without extension (either FontAwesome5FreeSolid
or FontAwesome5FreeRegular
).
```javascript function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); var font_common_1 = require("./font-common"); var trace_1 = require("../../trace"); var platform_1 = require("../../platform"); var fs = require("../../file-system"); var utils = require("../../utils/utils"); __export(require("./font-common")); var EMULATE_OBLIQUE = true; var OBLIQUE_TRANSFORM = CGAffineTransformMake(1, 0, 0.2, 1, 0, 0); var DEFAULT_SERIF = "Times New Roman"; var DEFAULT_MONOSPACE = "Courier New"; var SUPPORT_FONT_WEIGHTS = parseFloat(platform_1.device.osVersion) >= 10.0; var Font = (function (_super) { __extends(Font, _super); function Font(family, size, style, weight) { console.log('--------- Font constructor', 'family:', family, 'size:', size, 'style:', style, 'weight', weight); return _super.call(this, family, size, style, weight) || this; } Font.prototype.withFontFamily = function (family) { console.log('--------- Font withFontFamily', 'family:', family); return new Font(family, this.fontSize, this.fontStyle, this.fontWeight); }; Font.prototype.withFontStyle = function (style) { console.log('--------- Font withFontStyle', 'style:', style); return new Font(this.fontFamily, this.fontSize, style, this.fontWeight); }; Font.prototype.withFontWeight = function (weight) { console.log('--------- Font withFontWeight', 'weight:', weight); return new Font(this.fontFamily, this.fontSize, this.fontStyle, weight); }; Font.prototype.withFontSize = function (size) { console.log('--------- Font withFontSize', 'size:', size); return new Font(this.fontFamily, size, this.fontStyle, this.fontWeight); }; Font.prototype.getUIFont = function (defaultFont) { console.log('--------- Font getUIFont', 'defaultFont:', defaultFont); if (!this._uiFont) { this._uiFont = createUIFont(this, defaultFont); } return this._uiFont; }; Font.prototype.getAndroidTypeface = function () { console.log('--------- Font getAndroidTypeface'); return undefined; }; Font.default = new Font(undefined, undefined, font_common_1.FontStyle.NORMAL, font_common_1.FontWeight.NORMAL); return Font; }(font_common_1.Font)); exports.Font = Font; function getFontFamilyRespectingGenericFonts(fontFamily) { console.log('--------- getFontFamilyRespectingGenericFonts', 'fontFamily:', fontFamily); if (!fontFamily) { return fontFamily; } switch (fontFamily.toLowerCase()) { case font_common_1.genericFontFamilies.serif: return DEFAULT_SERIF; case font_common_1.genericFontFamilies.monospace: return DEFAULT_MONOSPACE; default: return fontFamily; } } function shouldUseSystemFont(fontFamily) { console.log('--------- shouldUseSystemFont', 'fontFamily:', fontFamily); return !fontFamily || fontFamily === font_common_1.genericFontFamilies.sansSerif || fontFamily === font_common_1.genericFontFamilies.system; } function getNativeFontWeight(fontWeight) { console.log('--------- getNativeFontWeight', 'fontWeight:', fontWeight); switch (fontWeight) { case font_common_1.FontWeight.THIN: return UIFontWeightUltraLight; case font_common_1.FontWeight.EXTRA_LIGHT: return UIFontWeightThin; case font_common_1.FontWeight.LIGHT: return UIFontWeightLight; case font_common_1.FontWeight.NORMAL: case "400": case undefined: case null: return UIFontWeightRegular; case font_common_1.FontWeight.MEDIUM: return UIFontWeightMedium; case font_common_1.FontWeight.SEMI_BOLD: return UIFontWeightSemibold; case font_common_1.FontWeight.BOLD: case "700": return UIFontWeightBold; case font_common_1.FontWeight.EXTRA_BOLD: return UIFontWeightHeavy; case font_common_1.FontWeight.BLACK: return UIFontWeightBlack; default: throw new Error("Invalid font weight: \"" + fontWeight + "\""); } } function getSystemFont(size, nativeWeight, italic, symbolicTraits) { console.log('--------- getSystemFont', 'nativeWeight:', nativeWeight, 'italic:', italic, 'symbolicTraits:', symbolicTraits); var result = UIFont.systemFontOfSizeWeight(size, nativeWeight); if (italic) { var descriptor = utils.ios.getter(result, result.fontDescriptor).fontDescriptorWithSymbolicTraits(symbolicTraits); result = UIFont.fontWithDescriptorSize(descriptor, size); } return result; } function createUIFont(font, defaultFont) { console.log('--------->>> createUIFont'); console.log('--------->>> createUIFont, font: ' + font + ', defaultFont: ' + defaultFont); var _a, _b; var result; var size = font.fontSize || defaultFont.pointSize; console.log('--------->>> createUIFont, size: ' + size); var nativeWeight = getNativeFontWeight(font.fontWeight); console.log('--------->>> createUIFont, nativeWeight: ' + nativeWeight); var fontFamilies = font_common_1.parseFontFamily(font.fontFamily); console.log('--------->>> createUIFont, parsed font family: ' + fontFamilies); console.log('--------->>> createUIFont, font.isBold?: ' + font.isBold); var symbolicTraits = 0; if (font.isBold) { symbolicTraits |= 2; } console.log('--------->>> createUIFont, font.isItalic?: ' + font.isItalic); if (font.isItalic) { symbolicTraits |= 1; } var fontDescriptorTraits = (_a = {}, _a[UIFontSymbolicTrait] = symbolicTraits, _a); console.log('--------->>> createUIFont, SUPPORT_FONT_WEIGHTS?: ' + SUPPORT_FONT_WEIGHTS); if (SUPPORT_FONT_WEIGHTS) { fontDescriptorTraits[UIFontWeightTrait] = nativeWeight; } console.log('--------->>>>><<<<<--------- createUIFont, font familiy names: ' + UIFont.familyNames); /* for (var key in UIFont) { if (key && key.indexOf('font') >= 0 || key.indexOf('Font') >= 0) { console.log('key:' + key + ', value: ' + UIFont[key] + ', type: ' + typeof UIFont[key]); } } */ for (let fontFamily of UIFont.familyNames) { /*console.log('--------->>>>><<<<<--------- createUIFont, font names for family: ' + fontFamily + ': ' + UIFont.fontNames(fontFamily));*/ /*console.log('--------->>>>><<<<<--------- createUIFont, typeof UIFont.fontNames: ' + typeof UIFont.fontNames);*/ if (fontFamily.indexOf('wesome') >= 0) { console.log('--------->>>>>|||||||||||||||<<<<<--------- createUIFont, font names for family "' + fontFamily + '": ' + UIFont.fontNamesForFamilyName(fontFamily)); for (let fontName of UIFont.fontNamesForFamilyName(fontFamily)) { console.log('--------->>>>>|||||||||||||||<<<<<--------- createUIFont, fontName: ' + fontName); var fontObject = UIFont.fontWithNameSize(fontName, 10); console.log('--------->>>>>|||||||||||||||<<<<<--------- createUIFont, fontObject: ' + fontObject); } } } for (var i = 0; i < fontFamilies.length; i++) { console.log('--------->>> createUIFont, in loop'); var fontFamily = getFontFamilyRespectingGenericFonts(fontFamilies[i]); console.log('--------->>> createUIFont, in loop, fontFamily?:' + fontFamily); if (shouldUseSystemFont(fontFamily)) { console.log('--------->>> createUIFont, in loop, system font should be used'); try { result = getSystemFont(size, nativeWeight, font.isItalic, symbolicTraits); console.log('--------->>> createUIFont, in loop, system font: ' + result); } catch (error) { console.log('--------->>> createUIFont, in loop, Error getting system font: ' + error); } break; } else { console.log('--------->>> createUIFont, in loop, no system font should be used'); try { var fontAttributes = (_b = {}, _b[UIFontDescriptorFamilyAttribute] = fontFamily, _b[UIFontDescriptorTraitsAttribute] = fontDescriptorTraits, _b); var descriptor = UIFontDescriptor.fontDescriptorWithFontAttributes(fontAttributes); console.log('--------->>> createUIFont, in loop, descriptor: ' + descriptor); result = UIFont.fontWithDescriptorSize(descriptor, size); console.log('--------->>> createUIFont, in loop, fontWithDescriptorSize, size: ' + size + ', result: ' + result); var actualItalic = utils.ios.getter(result, result.fontDescriptor).symbolicTraits & 1; if (font.isItalic && !actualItalic && EMULATE_OBLIQUE) { descriptor = descriptor.fontDescriptorWithMatrix(OBLIQUE_TRANSFORM); result = UIFont.fontWithDescriptorSize(descriptor, size); } if (result.familyName === fontFamily) { break; } else { result = null; } } catch (error) { console.log('--------->>> createUIFont, in loop, Error in no system font branch: ' + error); } } } if (!result) { console.log('--------->>> createUIFont, after loop, no results, get system font'); result = getSystemFont(size, nativeWeight, font.isItalic, symbolicTraits); } console.log('--------->>> createUIFont, after loop, result: ' + result); return result; } var ios; (function (ios) { function registerFont(fontFile) { console.log('--------- registerFont'); var filePath = fs.path.join(fs.knownFolders.currentApp().path, "fonts", fontFile); console.log('--------- filePath', filePath); if (!fs.File.exists(filePath)) { console.log('--------- file does not exist!'); filePath = fs.path.join(fs.knownFolders.currentApp().path, fontFile); console.log('--------- changed filePath to', filePath); } else { console.log('--------- file exists'); } var fontData = utils.ios.getter(NSFileManager, NSFileManager.defaultManager).contentsAtPath(filePath); console.log('--------- fontData', fontData); if (!fontData) { console.log('--------- Error: Could not load font from', fontFile); throw new Error("Could not load font from: " + fontFile); } var provider = CGDataProviderCreateWithCFData(fontData); console.log('--------- provider', provider); var font = CGFontCreateWithDataProvider(provider); console.log('--------- font', font); if (!font) { console.log('--------- Error: Could not create font from', fontFile); throw new Error("Could not load font from: " + fontFile); } var error = new interop.Reference(); if (!CTFontManagerRegisterGraphicsFont(font, error)) { console.log('--------- Error: Could not register font', font, 'Error:', error); console.log('--------- Error while registering font', CFErrorCopyDescription(error.value)); if (trace_1.isEnabled()) { trace_1.write("Error occur while registering font: " + CFErrorCopyDescription(error.value), trace_1.categories.Error, trace_1.messageType.error); } } else { console.log('--------- Successfully registered font:', font); } } ios.registerFont = registerFont; })(ios = exports.ios || (exports.ios = {})); function registerFontsInFolder(fontsFolderPath) { console.log('--------- registerFontsInFolder'); var fontsFolder = fs.Folder.fromPath(fontsFolderPath); console.log('--------- fontsFolder', fontsFolder); fontsFolder.eachEntity(function (fileEntity) { console.log('--------- in loop: fileEntity', fileEntity); console.log('--------- in loop: fileEntity.name', fileEntity.name); if (fs.Folder.exists(fs.path.join(fontsFolderPath, fileEntity.name))) { console.log('--------- in loop: fileEntity.name is folder'); return true; } else { console.log('--------- in loop: fileEntity.name is not a folder'); } console.log('--------- in loop: fileEntity.name is file?', fileEntity instanceof fs.File); console.log('--------- in loop: fileEntity.extension?', fileEntity.extension); console.log('--------- in loop: fileEntity.extension === .ttf or .otf?', fileEntity.extension === ".ttf" || fileEntity.extension === ".otf"); if (fileEntity instanceof fs.File && (fileEntity.extension === ".ttf" || fileEntity.extension === ".otf")) { console.log('--------- in loop: call ios.registerFont'); console.log('--------- in loop: typeof ios.registerFont', typeof ios.registerFont); ios.registerFont(fileEntity.name); } return true; }); } function registerCustomFonts() { console.log('--------- registerCustomFonts'); var appDir = fs.knownFolders.currentApp().path; console.log('--------- appDir', appDir); var fontsDir = fs.path.join(appDir, "fonts"); console.log('--------- fontsDir', fontsDir); if (fs.Folder.exists(fontsDir)) { console.log('--------- fontsDir folder exists'); registerFontsInFolder(fontsDir); } else { console.log('--------- fontsDir folder does not exist!'); } } registerCustomFonts(); //# sourceMappingURL=font.ios.js.map ```
```
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:19:18: --------- Font constructor family: undefined size: undefined style: normal weight normal
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:272:14: --------- registerCustomFonts
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:274:14: --------- appDir /var/mobile/Containers/Data/Application/437D84FC-C9B3-4348-9717-487CFD5E13E2/Library/Application Support/LiveSync/app
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:276:14: --------- fontsDir /var/mobile/Containers/Data/Application/437D84FC-C9B3-4348-9717-487CFD5E13E2/Library/Application Support/LiveSync/app/fonts
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:278:18: --------- fontsDir folder exists
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:247:14: --------- registerFontsInFolder
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:249:14: --------- fontsFolder {
"_path": "/var/mobile/Containers/Data/Application/437D84FC-C9B3-4348-9717-487CFD5E13E2/Library/Application Support/LiveSync/app/fonts",
"_name": "fonts"
}
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:251:18: --------- in loop: fileEntity {
"_path": "/var/mobile/Containers/Data/Application/437D84FC-C9B3-4348-9717-487CFD5E13E2/Library/Application Support/LiveSync/app/fonts/fontawesome-webfont.ttf",
"_name": "fontawesome-webfont.ttf",
"_extension": ".ttf"
}
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:252:18: --------- in loop: fileEntity.name fontawesome-webfont.ttf
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:257:22: --------- in loop: fileEntity.name is not a folder
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:259:20: --------- in loop: fileEntity.name is file? true
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:260:20: --------- in loop: fileEntity.extension? .ttf
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:261:20: --------- in loop: fileEntity.extension === .ttf or .otf? true
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:264:22: --------- in loop: call ios.registerFont
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:265:22: --------- in loop: typeof ios.registerFont function
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:209:18: --------- registerFont
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:211:18: --------- filePath /var/mobile/Containers/Data/Application/437D84FC-C9B3-4348-9717-487CFD5E13E2/Library/Application Support/LiveSync/app/fonts/fontawesome-webfont.ttf
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:217:22: --------- file exists
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:220:18: --------- fontData <00010000 000d0080 00030050 4646544d 6bbe47b9 00028690 0000001c 47444546 02f00004 00028670 00000020 4f532f32 88327a40 00000158 00000060 636d6170 0abf3a7f 00000ca8 000002f2 67617370 ffff0003 00028668 00000008 676c7966 8ff7ae4d 00001aac 00024cbc 68656164 1089e52d 000000dc 00000036 68686561 0f030ab5 00000114 00000024 686d7478 45791885 000001b8 00000af0 6c6f6361 02f5a25c 00000f9c 00000b10 6d617870 032c021c 00000138 00000020 6e616d65 e3978bac 00026768 00000486 706f7374 af8f9ba1 00026bf0 00001a75 00010000 000401cb 90cf7859 5f0f3cf5 000b0700 00000000 d433cd32 00000000 d433cd32 ffffff00 09010600 00000008 00020001 00000000 00010000 0600ff00 00000900 ffffffff 09010001 00000000 00000000 00000000 000002b5 00010000 02c30219 00270000 00000002 00000001 00010000 00400000 00000000 00030669 01900005 0000048c 04330000 0086048c 04330000 02730000 018a0000 00000000 00000000 00000000 00000000 00000000 00000000 00007079 72730040 0020f
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:226:18: --------- provider
```
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:19:18: --------- Font constructor family: undefined size: undefined style: normal weight normal
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:272:14: --------- registerCustomFonts
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:274:14: --------- appDir /var/mobile/Containers/Data/Application/437D84FC-C9B3-4348-9717-487CFD5E13E2/Library/Application Support/LiveSync/app
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:276:14: --------- fontsDir /var/mobile/Containers/Data/Application/437D84FC-C9B3-4348-9717-487CFD5E13E2/Library/Application Support/LiveSync/app/fonts
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:278:18: --------- fontsDir folder exists
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:247:14: --------- registerFontsInFolder
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:249:14: --------- fontsFolder {
"_path": "/var/mobile/Containers/Data/Application/437D84FC-C9B3-4348-9717-487CFD5E13E2/Library/Application Support/LiveSync/app/fonts",
"_name": "fonts"
}
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:251:18: --------- in loop: fileEntity {
"_path": "/var/mobile/Containers/Data/Application/437D84FC-C9B3-4348-9717-487CFD5E13E2/Library/Application Support/LiveSync/app/fonts/fa-solid-900.ttf",
"_name": "fa-solid-900.ttf",
"_extension": ".ttf"
}
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:252:18: --------- in loop: fileEntity.name fa-solid-900.ttf
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:257:22: --------- in loop: fileEntity.name is not a folder
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:259:20: --------- in loop: fileEntity.name is file? true
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:260:20: --------- in loop: fileEntity.extension? .ttf
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:261:20: --------- in loop: fileEntity.extension === .ttf or .otf? true
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:264:22: --------- in loop: call ios.registerFont
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:265:22: --------- in loop: typeof ios.registerFont function
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:209:18: --------- registerFont
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:211:18: --------- filePath /var/mobile/Containers/Data/Application/437D84FC-C9B3-4348-9717-487CFD5E13E2/Library/Application Support/LiveSync/app/fonts/fa-solid-900.ttf
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:217:22: --------- file exists
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:220:18: --------- fontData <00010000 000b0080 00030030 47535542 208b257a 00000138 00000054 4f532f32 3fb852ae 0000018c 00000056 636d6170 7deb8cb1 00000ddc 000031c6 676c7966 e9309032 00004ba0 00021c80 68656164 1093a938 000000e0 00000036 68686561 04400536 000000bc 00000024 686d7478 d5e8fe2f 000001e4 00000bf8 6c6f6361 031e4bbc 00003fa4 00000bfc 6d617870 04280102 00000118 00000020 6e616d65 fc8f9fcb 00026820 000002fa 706f7374 6b43fc9b 00026b1c 000025d1 00010000 01c0ffc0 00000280 fff4fff7 02890001 00000000 00000000 00000000 000002fe 00010000 00010000 1bc4b4d0 5f0f3cf5 000b0200 00000000 d77bb45a 00000000 d77bb45a fff4ffba 028901cc 00000008 00020001 00000000 00010000 02fe00f6 00200000 00000002 0000000a 000a0000 00ff0000 00000000 00010000 000a0030 003e0002 44464c54 000e6c61 746e001a 00040000 00000000 00010000 00040000 00000000 00010000 00016c69 67610008 00000001 00000001 00040004 00000001 00080001 00060000 00010000 000101f3 01900005 00000196 01660
CONSOLE LOG file:///app/tns_modules/tns-core-modules/ui/styling/font.js:226:18: --------- provider
everything works in the older version until this new template(nativescript-vue: ^2.0.0-alpha.3) now not working. Hope someone could give update on this. Thanks
@n0v1 Your response just helped me tremendously thank you so much for the excellent and thorough solution!
I'll just notify @rigor789 so that he's aware of this and can maybe dispatch the information :)
i got partial success by:
1 - putting the .ttf files in the font folder:
2 - creating auxiliary css classes inside _app-commons.scss:
.fa {
font-family: "FontAwesome";
}
.fab {
font-family: "fa-brands-400";
}
.far {
font-family: "fa-regular-400";
}
.fas {
font-family: "fa-solid-900";
}
That way the icons can be used pretty much like this:
<Button v-if="auth" @tap="$navigateTo('M00200LandingDashboard')">
<FormattedString>
<!-- <i class="fas fa-sign-in-alt"></i> -->
<Span class="fas" text.decode=""/>
<Span text=" Continuar como "/>
<Span class="b" :text="auth.pessoa.pessoa_email"/>
</FormattedString>
</Button>
However i am still unable to use the css class which represents the hex code.
@n0v1 I've made some tests and it seems that modifing the fas fonts by changing the weight class from 400 Regular to 900 Black is not necessary (since you already pass the font family). Moreover is has some drawbacks (in android) apparently: If I use a tabview and set its class to 'fas' in order to use solid icons as tabviewitems, then the font-weight is propagated to the the content of the tab view and cannot be overwrote by setting the font weight to normal using css. I'm using nativescript-vue. So I removed that step and everything works like a charm, thanks! :)
@vratojr : how many and which font file (.ttf) do we need?
For example, we need only 3 icons from free solid set. Do we need FontAwesome.ttf AND fa-solid-900?
@realtebo if you use only the solid set then I'd say you could only import the solid fonts. If I were you I'd do the following things: 1) Do exactly what n0v1 did (with the small modifications I proposed) 2) Check that everything work 3) Remove the fonts that you think that you don't need and see what happen.
@vratojr It's not so simple, I have not understood what n0v1 (and you) did from start, so ... ....
Starting from scratch. .. From Official Guide
cd ~
vue init nativescript-vue/vue-cli-template delete_me
? Project name delete_me
? Project description A native application built with NativeScript-Vue
? Application name NativeScript-Vue Application
? Unique application identifier org.nativescript.application
? Project version 1.0.0
? Author
? License MIT
? Select the programming language javascript
? Select a preset (more coming soon) Simple
? Install vuex? (state management) No
? Install vue-devtools? No
? Color scheme none
cd delete_me
npm install
Then I installed nativescript-fonticon
Official guide
npm install nativescript-fonticon --save
Then I visited the page Hosting Font Awesome Yourself and downloaded the zip.
Extracted, I copied webfonts/fa-solid-900.ttf
into my project's folder app/fonts
, without changing its name.
I then copied css/fontawesome.css
into mu project as app/fontawesome.css
. I don't know if it's important but I do not copied the minified version; I copied the normal one.
Then I switched to this page to go on: https://nativescript-vue.org/blog/using-fonticons/ but this page is too old, so I proceeded just using my brain as guide.
I modified app/components/app.vue
as follows
<template>
<Page>
<GridLayout columns="*" rows="*">
<Label class="message fa" text.decode="" col="0" row="0"/>
</GridLayout>
</Page>
</template>
Then I renamed webfonts/fa-solid-900.ttf
as webfonts/Font Awesome Free 5 Solid.ttf
, because on IOS font file name must match font full name. And this is is how Apple's Font Book identifies my font, it's the full name of the font.
I edit my app.scss
file as follows
@import 'fontawesome.css';
.fa,
.fas {
font-family: "Font Awesome Free 5 Solid";
}
Tried to run ...
tns debug ios --bundle
and I finally obtained a square with a question mark inside.
So, please, someone could guide me step by step for missing steps?
Here's how I got this to work.
Download and extract fontawesome-free-5.9.0-web.zip
from here.
Add webfonts/fa-brands-400.ttf
, webfonts/fa-regular-400.ttf
and webfonts/fa-solid-900.ttf
to app/fonts
directory.
Add css/fontawesome.css
to app/assets
directory. I removed any non fa-*:before
classes from this file.
In your app's main.js
. You should see a console log for each class when starting your app.
TNSFontIcon.debug = true
TNSFontIcon.paths = {
'fa': './assets/fontawesome.css',
}
TNSFontIcon.loadCss()
Vue.filter('fonticon', fonticon)
In your app's main css file, e.g. app.scss
.
.fa-brands {
font-family: "Font Awesome 5 Brands", "fa-brands-400";
}
.far {
font-family: "Font Awesome 5 Free", "fa-regular-400";
font-weight: 400;
}
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
font-weight: 900;
}
Now use them in your view.
<Label :text="'fa-facebook-f' | fonticon" class="fa-brands" />
<Label :text="'fa-eye' | fonticon" class="far" />
<Label :text="'fa-eye' | fonticon" class="fas" />
@n0v1's suggestion didn't work for me, but @lochstar's worked fine. Thank you very much!
I did not manage to launch the nativescript-fonticon plugin, I met the solutions described here after I myself solved the issue. However, I plan to try the methods described here. In the meantime, I will tell you how I added icons without a plugin. I wanted to use the icons Ionicon 4v. What I've done:
Go to this page https://ionicons.com/ and download the SVG sources. (Unfortunately, in version 4 I did not find a ready-made font file, however in version 2 they exist and can be downloaded from here https://ionicons.com/v2/) I used version 4.
Go to https://icomoon.io/app/#/select and import all SVG files (or just the ones you need). Then select all the icons, generate and download the font. I did not do any settings in icomoon. When generating a font, you can change the name. I left the standard.
Transfer the icomoon.ttf file to the app / fonts directory
Add a font definition with its exact name.
.ico { font-family: 'icomoon'; }
In markup, just use
<Label class="ico" text.decode="" />
It is necessary to rebuild the application. To get the font on the device.
This works for me!
Put .ttf
files in folder app/fonts
(important: file name must be the same as in CSS):
app/
fonts/
fa-brands-400.ttf
fa-...
Add CSS to common app CSS file:
.fab {
font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
font-style: normal;
font-weight: 400;
}
.far {
font-family: 'Font Awesome 5 Free', 'fa-regular-400';
font-style: normal;
font-weight: 400;
}
.fas {
font-family: 'Font Awesome 5 Free', 'fa-solid-400';
font-style: normal;
font-weight: 900;
}
Add class and decoded icon with markup:
<Label class="fal" text.decode=""></Label>
Solution how to fix the question mark in boxes. So we can see the icons.
.fa {
font-family: Font Awesome 5 Pro, fa-light-300;
font-weight: 300;
}
.fas {
font-family: Font Awesome 5 Pro, fa-solid-900;
font-weight: 900;
}
.fab {
font-family: Font Awesome 5 Pro, fa-brands-400;
font-weight: 400;
}
.far {
font-family: Font Awesome 5 Pro, fa-regular-400;
font-weight: 400;
}
.fad {
font-family: Font Awesome 5 Pro, fa-dutone-900;
font-weight: 900;
}
Source: https://github.com/NathanWalker/nativescript-fonticon/issues/22#issuecomment-563977114
Main.js:
Vue:
fontawesome ttf file path:
app/fonts/webfont-fontawesome.ttf
fontawesome all.css path:
app/font-awesome.css
Editted:
tns run ios console::