Android Comment intégrer les polices Icon


Exemple

Pour utiliser les polices d'icônes, suivez simplement les étapes ci-dessous:

  • Ajouter le fichier de police à votre projet

    Vous pouvez créer votre fichier d'icône de police à partir de sites Web en ligne tels que icomoon , où vous pouvez télécharger des fichiers SVG contenant les icônes requises, puis télécharger la police d'icône créée. Ensuite, placez le fichier de police .ttf dans un dossier nommé polices (nommez-le comme vous le souhaitez) dans le dossier assets:

    Emplacement où placer le fichier de police

  • Créer une classe d'assistance

    Maintenant, créez la classe d'assistance suivante afin d'éviter de répéter le code d'initialisation de la police:

    public class FontManager {
      public static final String ROOT = "fonts/";
      FONT_AWESOME = ROOT + "myfont.ttf";
      public static Typeface getTypeface(Context context) {
        return Typeface.createFromAsset(context.getAssets(), FONT_AWESOME);
      }
    }
    

    Vous pouvez utiliser la classe Typeface pour sélectionner la police à partir des actifs. De cette façon, vous pouvez définir la police sur différentes vues, par exemple sur un bouton:

    Button button=(Button) findViewById(R.id.button);
    Typeface iconFont=FontManager.getTypeface(getApplicationContext());
    button.setTypeface(iconFont);
    

    Maintenant, la police de caractères du bouton a été remplacée par la police d’icône nouvellement créée.

  • Ramassez les icônes que vous voulez

    Ouvrez le fichier styles.css attaché à la police d'icône. Vous y trouverez les styles avec les caractères Unicode de vos icônes:

    .icon-arrow-circle-down:before {
      content: “\e001”;
    }
    .icon-arrow-circle-left:before {
      content: “\e002”;
    }
    .icon-arrow-circle-o-down:before {
      content: “\e003”;
    }
    .icon-arrow-circle-o-left:before {
      content: “\e004”;
    }
    

    Ce fichier de ressources servira de dictionnaire, qui associe le caractère Unicode associé à une icône spécifique à un nom lisible par l'homme. Maintenant, créez les ressources de chaîne comme suit:

    <resources>
      <! — Icon Fonts -->
      <string name=”icon_arrow_circle_down”>&#xe001; </string>
      <string name=”icon_arrow_circle_left”>&#xe002; </string>
      <string name=”icon_arrow_circle-o_down”>&#xe003; </string>
      <string name=”icon_arrow_circle_o_left”>&#xe004; </string>
    </resources>
    
  • Utilisez les icônes dans votre code

    Maintenant, vous pouvez utiliser votre police dans différentes vues, par exemple, comme suit:

    button.setText(getString(R.string.icon_arrow_circle_left))
    

    Vous pouvez également créer des vues de texte de bouton à l'aide des polices d'icônes:

    Exemple de boutons avec des icônes sur eux