Comments (14)
- Put your
FontAwesome.ttf
intoapp/fonts
- Create
app/assets/font-awesome.css
file with a content like the following one:
.fa {
font-family : FontAwesome;
}
.fa-remove:before,
.fa-close:before,
.fa-times:before {
content: "\f00d";
}
.fa-glass:before {
content: "\f000";
}
.fa-music:before {
content: "\f001";
}
- Install the package (if not installed yet):
npm install nativescript-fonticon --save
- Change your
main.js
file to contain the following:
import { TNSFontIcon, fonticon } from 'nativescript-fonticon';
TNSFontIcon.debug = true;
TNSFontIcon.paths = {
'fa': './assets/font-awesome.css',
};
// Simple variant:
// TNSFontIcon.loadCss();
// Or verbose variant:
TNSFontIcon.loadCss().then(() => {
console.log('FontAwesome font collection loaded successfully.');
}).catch((e) => {
console.log('Error loading FontAwesome font collection!', e.getMessage());
});
Vue.filter('fonticon', fonticon);
- Use it like this:
<Label class="fa" :text="'fa-music' | fonticon"></Label>
from nativescript-fonticon.
Hi,
You just need to put font file in app/fonts (folder already created normally) instead of app/assets/fonts.
That's how I made it work :)
from nativescript-fonticon.
excuse me, could you example for TabViewItem
from nativescript-fonticon.
@matrunchyk Mine isn't working. I've tried it countless times, it doesn't work
I have both the css and .ttf files in the right directories
But this fontawesome icon in this template
Please help.
from nativescript-fonticon.
@thukuwanjiku @thearabbit Did you try to name the files exactly the same as in the steps I have provided? Some browsers require the name of the font file to be exactly the same as font-family name.
from nativescript-fonticon.
This is my structure
// app.scss
.fa {
font-family: FontAwesome, fontawesome-webfont;
}
// main.js
// FontAwesome
import { TNSFontIcon, fonticon } from "nativescript-fonticon";
TNSFontIcon.debug = true;
TNSFontIcon.paths = {
fa: "./assets/styles/font-awesome.css"
};
TNSFontIcon.loadCss();
Vue.filter("fonticon", fonticon);
from nativescript-fonticon.
@matrunchyk I sure did, again and again, it just won't work. Perhaps if you spare a minute and build a blank app with the icons working you could share with me and have me build on top of it. I'd appreciate.
from nativescript-fonticon.
I cannot get it to work either. Did someone figure out how to make it work with nativescript-vue?
from nativescript-fonticon.
It works for me in my current project. I'll share an example with you tomorrow and will update Docs as well.
from nativescript-fonticon.
That would be helpfull, looking forward to it!
from nativescript-fonticon.
it doesn't work to me too.
from nativescript-fonticon.
i'm remove and rebuild entire project, it work again. Hope this help
from nativescript-fonticon.
I had the same issue, the problem was my webpack config.
This part was missing:
new CopyWebpackPlugin([
{ from: "fonts/**" },
{ from: "**/*.+(jpg|png)" },
{ from: "assets/**/*" },
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
I hope this hep!
from nativescript-fonticon.
@matrunchyk thanks for the /assets
tip. It seems that the underlying Nativescript file-system component cannot read files in the app
root.
from nativescript-fonticon.
Related Issues (20)
- Updating the ion-icons library to version 2 HOT 2
- Javascript Implementation Issues
- [Nativescript-Vue] Font Awesome 5, it show [Question Mark] HOT 15
- material-design-icons css parsing issue HOT 1
- Is there a Javascript version of this? HOT 5
- Doesn't work with single quotes on CSS
- [IOS] : Font Awesome 5 PRO - Light icon always displayed as solid HOT 2
- why (fa-spin it's not working HOT 1
- Some icons work, some icons do not...
- how to integrate with scss HOT 1
- [Nativescript-Vue] CSS file being loaded after home page is mounted HOT 1
- [Nativescript-Vue] CSS file being loaded after home page is mounted HOT 7
- Icon with text HOT 7
- not working with materialdesignicons
- Using with angular 4 HOT 1
- update to Nativescript 3 HOT 10
- Problem with Icomoon iconfonts HOT 1
- Webpack bug HOT 3
- Use with TabView HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nativescript-fonticon.