3

I have added font awesome to my ionic 1 app , I have created fonts folder and reference the style sheet in the HTML page ,

The icons showing in the browser but not showing in any android device.

this is the files and code used

Mohammed al-kahtani
  • 65
  • 11
  • We need any relevant HTML, CSS, and Javascript. – Jhecht Dec 31 '16 at 10:59
  • I have created a Fonts folder and i have added "SVG , eot , ttf , woff " files to this folder and in my HTML i have added this " " , in the view i used the tag , it works perfect in the browser but later on after i build APK , nothing showing – Mohammed al-kahtani Dec 31 '16 at 11:06
  • Could you please post at the _bare minimum_ a screen shot? Without any HTML or CSS is is almost impossible for us to test and correct your issue. – Jhecht Dec 31 '16 at 11:09
  • I have attached screen shot for the files structure and the CSS file content along with tag – Mohammed al-kahtani Dec 31 '16 at 12:21

3 Answers3

3

You need to have the font file for FontAwesome, say fontawesome.ttf. Next, what you have to do is just include that file in your CSS file. Here I will assume that both the CSS file and the font file are located in the same directory.

@font-face {
  font-family: FontAwesome;
  src:         url(fontawesome.ttf);
}

Now you can use FontAwesome throughout your application or webpage by just setting the font-family property to FontAwesome whereever needed.

Wais Kamal
  • 5,858
  • 2
  • 17
  • 36
  • i already did this in my CSS file font-family: 'fontawesome'; src:url('../fonts/fontawesome-webfont.eot'); src:url('../fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } – Mohammed al-kahtani Dec 31 '16 at 11:15
1

Issue solved, please follow this link Use Font Awesome Glyph Icons With Ionic Framework

, to get bigger size icons you need to add this line to your CSS file 

font-size: 25px !important;

Thank you everyone for your support.

Mohammed al-kahtani
  • 65
  • 11
0

For me the solution was:

Go to /bower_components/font_awesome/scss/variables

change $fa-font-path to $fa-font-path: "../assets/fonts" !default;

JorgeMadson
  • 140
  • 10