Comment personnaliser la taille de la police dans le cadre ionique

Je suis en utilisant ionic framework (avec cordova) pour développer des applications mobiles.
Ce que je veux faire est d'augmenter la taille de la police (en général dans mon application).

J'ai vu que dans la documentation officielle : http://ionicframework.com/tutorials/customizing-ionic-with-sass/.
Mais je ne comprends pas comment personnaliser une fois le sass est de travail.

Je travaille dans un des onglets basée sur une Application telle que : http://forum.ionicframework.com/uploads/default/269/9934610f0a08b8d2.png
J'ai essayé d'ajouter manuellement une classe sur l'onglet, mais le résultat n'est pas très propre... le texte est recadrée...

Est-il un moyen officiel de changer la taille de police ?

source d'informationauteur psv

  1. 21

    Je pense que vous n'avez pas besoin de comprendre tout sur Sass.
    Dans votre répertoire de projet, dans

    .../yourProject/www/lib/ionic/scss

    Il existe un fichier nommé _variables.scss où vous verrez quelque chose comme ceci :
    Comment personnaliser la taille de la police dans le cadre ionique
    Comment personnaliser la taille de la police dans le cadre ionique
    Ce sont des polices de taille variables, vous avez juste à changer cela et de construire les ionique fichier css.
    Je vous suggère d'utiliser https://prepros.io/. J'espère que cela vous a aidé.

  2. 6

    Pensé que je pourrais partager avec vous ce que j'ai appris dans Ionique.

    Fondamentalement, Ionique a un ensemble par défaut de tailles, de couleurs, de polices de caractères pour chaque chose, vous pouvez concevoir et cet ensemble est stocké dans le _variables.scss fichier. Ce fichier est au lib/ionique/scss/_variables.scss

    D'ouvrir ce fichier et à la recherche de ce que vous voulez modifier. Par exemple, j'avais besoin d'augmenter l'en-tête de taille de police. J'ai donc cherché dans le _variables.scss dossier et constaté $bar-titre-taille de police.

    Il a été défini comme $bar-title-font-size: 17px !default;

    Maintenant, ouvrez votre ionique.app.scss fichier et écrire quelque chose comme

    $bar-title-font-size: 25px !default;

    ***N'oubliez pas d'écrire la déclaration ci-dessus avant le @import "ionic/scss/ionic"; déclaration.

    Enregistrer le fichier et vos modifications sont instantanément prendre effet. Ionique a fait aussi simple que cela!!! 🙂

  3. 3

    De recherche de votre projet/www/css et modifier le style.css, et à l'intérieur du fichier en écriture:

    {font-size:55px !important;}

    changement 55px de n'importe quelle taille vous avez besoin.

  4. 0

    Souvent que vous le souhaitez pour décider quand utiliser l'icône de la taille donc, je suis venu avec la solution suivante.

    CSS

    /* Ionicon icons resizing css */
.ion-1x { font-size: 24px !important;}
.ion-2x { font-size: 48px !important;}

    HTML 

    //in iconics framework
<ion-icon name="logo-pinterest" class="ion-1x"></ion-icon>
<ion-icon name="logo-twitter" class="ion-2x"></ion-icon>

//without ionics framework
<i class="ion-1x ion-social-pinterest"></i>
<i class="ion-2x ion-social-twitter"></i>
  5. -1

    - Je utiliser Ionique pour mes applications, et ce est la façon dont je traite avec redimensionnement:

    1. Trouver la classe/élément que vous avez besoin de modifier dans le CSS
    2. Ensemble padding:0 0 0 0; ou à des valeurs que vous souhaitez (en haut,à droite,en bas,à gauche).
    3. Définir la taille de police
    4. Définir la hauteur
    5. Définir la hauteur de la ligne

    Edit: c'est de Cette façon que je l'ai modifié mon onglet éléments

    .tab-item{
    margin: 0;
    line-height: 100px;
    box-sizing: content-box;
    font-size: 40px;
    color:#FFFFFF;
    font-family: 'Roboto-Light';
    opacity: 1;
    max-width: 200px;
}