Icons are now working in nativescript angular

[MuhammadTahir92]

hey every one , I am using icons in nativescript with angular but its not working ,
I try icomoon icons , material icons, font-aweasome but all of them have issues are not working for me
My package.json is
`
{
"description": "NativeScript Application",
"license": "SEE LICENSE IN ",
"readme": "NativeScript Application",
"repository": "",
"nativescript": {
"id": "org.nativescript.loginScreen",
"tns-android": {
"version": "4.0.1"
},
"tns-ios": {
"version": "3.4.1"
}
},
"dependencies": {
"@angular/animations": "~5.2.0",
"@angular/common": "~5.2.0",
"@angular/compiler": "~5.2.0",
"@angular/core": "~5.2.0",
"@angular/forms": "~5.2.0",
"@angular/http": "~5.2.0",
"@angular/platform-browser": "~5.2.0",
"@angular/platform-browser-dynamic": "~5.2.0",
"@angular/router": "~5.2.0",
"font-awesome": "^4.7.0",
"nativescript-angular": "~5.3.0",
"nativescript-material-icons": "^1.0.3",
"nativescript-ng2-fonticon": "^1.3.4",
"nativescript-ngx-fonticon": "^4.2.0",
"nativescript-theme-core": "~1.0.4",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.5.2",
"tns-core-modules": "~4.0.0",
"zone.js": "~0.8.2"
},
"devDependencies": {
"babel-traverse": "6.4.5",
"babel-types": "6.4.5",
"babylon": "6.4.5",
"lazy": "1.0.11",
"nativescript-dev-sass": "^1.5.0",
"nativescript-dev-typescript": "~0.7.0",
"typescript": "~2.7.2"
}
}

`

Hear is my fonts folder

and my html looks like this

[racknoris]

In case of Font Awesome, use this in your css:

.font-awesome {
    font-family: "FontAwesome";
}

Then in your html, if you want a phone icon, you would do:
<Label text="&#xf095;" class="font-awesome"></Label>

[MuhammadTahir92]

still same

[MuhammadTahir92]

i have fontawesome-webfont.tff in fonts folder but still the same

[racknoris]

Perhaps in the css, try this:

.font-awesome {
    font-family: "fontawesome-webfont";
}

[MuhammadTahir92]

No still same
i have icons in my other applications but in this app icons are not working don't know what the matter with this one

[tsonevn]

Hi @MuhammadTahir92,
Check whether you are setting up the correct font name as it is described in the documentation:

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.

Also, it will help if you provide sample project, which could be used for debugging.

[MuhammadTahir92]

hey @tsonevn @racknoris the problem is solved the font-family is right and every thing is working fine the issue is i am using sass not just css so i add styling in app.css but not specifying in app.android.scss or app.ios.sass thats why its not working , I just add the font family in common sass for both ios and android and it works .

[NgxDev]

just had the same issue
if anybody else is using Angular with NativeScript, I had to put the fonts folder in the src folder, unlike in the docs where it shows it on the same level with App_Resources (sure, that's not an Angular/NativeScript app)
Spent like an hour of trial and error until I "accidentally" tried the src folder

[jaygandhi49]

hey @tsonevn @racknoris the problem is solved the font-family is right and every thing is working fine the issue is i am using sass not just css so i add styling in app.css but not specifying in app.android.scss or app.ios.sass thats why its not working , I just add the font family in common sass for both ios and android and it works .

still same issue please add proper solution

[belachkar]

@MrCroft Thanks, works for me. For Fontawesome 4.7:

• move fonts directory to src folder instead of app.
• Apply the font-familly to the scpecific class

.fa {
  font-family: "FontAwesome", "fontawesome-webfont";
}

• Applying the class to the ns element (class:fa, text:the unicode):

<label col="0" class="sidedrawer-list-item-text fa" text="&#xf05a;"></label>

I hope it helps