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:
- Ejecutar tareas en backgound en NativeScript
- 'TypeError: Path debe ser una cadena. Recibido indefinido 'después de correr npm ejecutar start.android en un entorno angular
- Cómo cambiar el nombre de la aplicación en NativeScript
- Empaquetar la aplicación portátil y portátil de Android desde CLI
- Plantilla xml de Nativescript que no soluciona problemas de caché
- 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:
También intenté la sintaxis de "\ uf230", pero ésa hace como texto llano.
¿Qué estoy haciendo mal?
- No se puede encontrar un SDK Android compatible para la compilación al ejecutar `plataforma tns add android`
- nativescript-sqlite y módulo angular2 no se encuentra excepción
- Cómo buscar una fecha de un datepicker en NativeScript
- La aplicación NativeScript sampleGroceries no compila
- NativeScript: vista personalizada de la cámara
- Barra de acción de eliminación de Android de Nativescript
- Cómo cambiar el color de acento de fondo de TextView en la aplicación de Android NativeScript
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:
Puedes ver este video en el que estaba basado para empezar. Corrige en el video la extensión utilizada para estar atenta.