Aquest article ens mostrarà com canviar el tipus de lletra que utilitza una aplicació i com afegir icones personalitzades.
Fins ara hem fet una aplicació per saber l'hora de sortida i posta del sol:
- En la primera part vàrem preparar el projecte inicial.
- En la segona part vàrem crear l'aplicació, fixant el lloc.
- En la tercera part vàrem afegir-hi geolocalització.
- En la quarta part vàrem afegir-hi un calendari per escollir la data.
- En la cinquena part vàrem afegir-hi Google Maps per escollir el lloc.
- En la sisena part vàrem afegir-hi traduccions a diversos idiomes.
Comencem pel tipus de lletra. En tenim moltes de disponibles a Google fonts. N'escollim una que s'ajusti a les necessitats (Poppins en el nostre cas) i descomprimim els fitxer *.ttf a assets/fonts. Tot seguit declarem la nova font i la posem per defecte, editant el fitxer theme/variables.scss per afegir:
... // Fonts // -------------------------------------------------- //@import "roboto"; //@import "noto-sans"; @font-face { font-family: "Poppins"; //font-style: normal; //font-weight: 400; src: url($font-path+'/Poppins-Regular.ttf'); } @font-face { font-family: "Poppins"; src: url($font-path+'/Poppins-Bold.ttf'); font-weight: bold; } @font-face { font-family: "Poppins"; src: url($font-path+'/Poppins-Italic.ttf'); font-style: italic; } @font-face { font-family: "Poppins"; src: url($font-path+'/Poppins-BoldItalic.ttf'); font-weight: bold; font-style: italic; } $font-family-base: "Poppins"; $font-family-md-base: "Poppins"; $font-family-ios-base: "Poppins"; $font-family-wp-base: "Poppins";
Pel que fa a les icones, si n'hem d'utilitzar moltes seria convenient declarar un nou tipus de lletra, però si són poques, és molt molt senzill afegir-les directament. Per això, escollim icones lliures, per exemple a Flaticon, procurant que siguin d'un sol color i en format SVG. Llavors les afegim a app/app.scss:
... // --- Custom icons ------------------------------------------------------------------- // // https://stackoverflow.com/a/44575053/1581368 // To generate a font : https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/ ion-icon { &[class*="custom-"] { // Instead of using the font-based icons we're applying SVG masks mask-size: contain; mask-position: 50% 50%; mask-repeat: no-repeat; background: currentColor; width: 1em; height: 1em; } // custom icons &[class*="custom-sunrise"] { mask-image: url(../assets/icon/sunrise.svg); } &[class*="custom-sunset"] { mask-image: url(../assets/icon/sunset.svg); } }
I llavors ja els podem utilitzar normalment a home.html:
...
<ion-item-divider color="light">
{{ "APP.timetable" | translate }}
</ion-item-divider>
<ion-item>
<ion-icon name="custom-sunrise" color="orange" item-left></ion-icon>
<ion-note item-right>{{ sunrise }}</ion-note>
</ion-item>
<ion-item>
<ion-icon name="custom-sunset" color="blue" item-left></ion-icon>
<ion-note item-right>{{ sunset }}</ion-note>
</ion-item>
...
El resultat es pot veure a continuació:
Observem en el lateral com s'ha carregat correctament el fitxer de fonts (les versions normal i negreta, que són les que s'utilitzen).
I d'aquesta manera tan senzilla podem donar-li un aspecte més polit a una aplicació. Per acabar-ho d'arrodonir, completem la pàgines de contacte, de crèdits i afegim informació al repositori de Github (en el fitxer README.md).
Com sempre, teniu tot el codi a la vostre disposició en el Github: v1.0.
I amb aquests retocs finals podem donar l'aplicació per completada. Espero que hagi resultat útil. Si teniu alguna idea per millorar-la, traduccions a altres idiomes o qualsevol comentari, no dubteu a comentar/contactar.
Cap comentari:
Publica un comentari a l'entrada