Nativescript y FontAwesome

Estoy intentando utilizar la fuente del icono FontAwesome en la aplicación de Nativescript, que es posible según este artículo https://www.nativescript.org/blog/mobile-app-best-practices—use-font-instead-of-image para mostrar un icono

Hice todo lo que se describe en ese artículo:

  • Añadido .ttf en app / fonts
  • Clase añadida en app.css

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

  • Se utiliza en XML como así

    text = "& # xf230;" clase

Pero el resultado es más bien decepcionante:

No funciona También intenté la sintaxis de "\ uf230", pero ésa hace como texto llano.

¿Qué estoy haciendo mal?

Podría ser algunas cosas. ¿Funciona en iOS? Como la definición de CSS es compatible con iOS, no es Android, ya que Android necesita el nombre de archivo real (sin extensión), mientras que iOS necesita el nombre de la fuente. Así que tengo que estar preparado para xplatform (el archivo es 'fontawesome-webfont.ttf'):

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

La sintaxis \f005 es \f005 ( <Label class="fa" [text]="'\uf005'"></Label> ), pero estoy usando el espléndido nativescript-ngx-fonticon (también hay un no- Angular) para poder hacer esto en su lugar:

<Label class="fa" [text]="'fa-shopping-basket' | fonticon"></Label>

Para que funcione, debe asegurarse de que el directorio "fuentes" esté dentro de la carpeta "app" y que existan los siguientes archivos:

 font-awesome.eot font-awesome.ttf 

He optado por adoptar esta fuente como el predeterminado de mi aplicación, así que no tengo que preocuparme por dónde voy a usarlo y cuánto para entrar en la clase correcta, todo se está poniendo muy bueno y el resultado es perfecto.

En CSS, sólo tiene que definir un selector de acuerdo con su interés para la fuente que se va a utilizar, por lo que sólo debe utilizar la directiva:

 page { font-family: 'FontAwesome' } 

Entonces, donde quiera un icono, simplemente use una entidad html que lo represente mientras busca el sitio: http://fontawesome.io/icons/

Vea las imágenes: introduzca la descripción de la imagen aquí

Puedes ver este video en el que estaba basado para empezar. Corrige en el video la extensión utilizada para estar atenta.

FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.