Just how to make use of Typeface Awesome in an Ionic Application
Released on Oct 18, 2017
•
3 minutes read
•
There is an aspect of complication when it concerns make use of FontAwesome in an Ionic Application. To include this typefaces collection in Ionic requires a little arrangement as well as this detailed overview will certainly give simply that.
Bootstrap an Ionic Application
Produce a brand-new Ionic application or you can comply with these actions to consist of FontAwesome in your Ionic application. Absolutely nothing will certainly damage down.
$ ionic begin ionic-use-fontawesome
Currently, mount the FontAwesome bundle from npm as well as wait in the application’s dependences:
$ npm mount font-awesome-- conserve
Kind the above in the origin folder of your application. This will certainly include the font-awesome folder under node_modules The -- conserve alternative will certainly consist of the bundle inside the dependences area of package.json documents.
Consist Of the typefaces
Currently roam to the src/index. html documents as well as include the adhering to web link tag simply over build/main. css:
1< 2 < Include a Personalized Duplicate Manuscript Ionic consists of a duplicate manuscript documents that is called throughout the construct procedure when the command ionic offer carries out as well as it is accountable for relocating details as well as necessary sources from node_modules to the www folder such as ionicons. The place of this manuscript documents is under
node_modules folder: Duplicate this documents as well as paste in inside a brand-new directory site called config under the origin directory site of your Ionic application. Open up the documents as well as include fontawesome entrances at the end of this documents. 1 copyFontawesomeFonts: { 2 src: , 3
dest
:
‘ {{WWW}}/ assets/fonts’ 4} , 5 copyFontawesomeCss:
{ 6 src
: , 7
dest: ' {{WWW}}/ assets/css' 8
} Include Customized Duplicate Manuscript in package.json ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'] We have to include this custom-made manuscript inside our
package.json documents to bypass the one where we replicated the initial documents from. Open up the package.json documents as well as include this json code:
1 " config":
{ 2" ionic_copy" :
"./ config/copy. config.js" 3} ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'] That's it in the arrangement component.
Usage FontAwesome To carry out FontAwesome in this or any type of Ionic application after the above arrangement, we attempt including some typefaces on our pre-generated web page. 1
< 2
<
3
< FontAwesome Symbols < 4<
5< 6 7
< 8< 9
< 10
<
<
Battery Degree
11
Vacant 12< 13
< << Battery Degree 1 < 14<<<
Battery Degree 2 < 15<<< Battery Degree 3 <
16 < 17<
< Battery Degree 4 18<
19
< 20< There are greater than 675 symbols offered in FontAwesome as well as I believe a mix of both Ionicons as well as FontAwesome will certainly suffice for some the applications around. You can also design them, transform their font-size
as well as shade according to your requirements. Complete resource code at this Github Database Initially Released at Hackernoon.com I'm a software program programmer as well as a technological author. In this blog site, I cover Technical composing, Node.js, Respond Indigenous as well as Exposition.
Presently, operating at Exposition. Formerly, I have actually functioned as a Programmer Supporter, as well as Elderly Web content Designer with firms like Draftbit, Vercel as well as Crowdbotics.
