Plate-forme de nouvelle générationObsolète

Ajout de polices d'icônes pour une nouvelle vue

Modifier en ligne

Vous pouvez styliser une nouvelle vue en ajoutant des polices d'icônes.

Procédure

  1. Générer des polices d'icônes personnalisées. Vous pouvez générer les polices d'icônes à partir d'images personnalisées.
    Remarque: Vérifiez que chaque image personnalisée porte le même nom que l'icône correspondante que vous souhaitez remplacer dans l'application.
  2. Copiez tous les formats de police générés (.ttf, .svg, .eot, .woff) dans le répertoire STYLE_EXTENSIONS_HOME/fonts .
    Remarque: Il est recommandé de créer le dossier fonts dans l'emplacement STYLE_EXTENSIONS_HOME .
  3. Copiez toutes les feuilles de style en cascade générées dans le fichier custom_glyphicons.scss et placez-les dans STYLE_EXTENSIONS_HOME, en vous assurant que l' URL de la police dans la feuille de style en cascade pointe vers l'emplacement des fichiers de police (.ttf, .svg, .eot, .woff). (STYLE_EXTENSIONS_HOME/fonts). Ajoutez une référence au fichier custom_glyphicons.scss dans le fichier <WORKSPACE>/store-frontend/store-extensions-src/styles_extn.scss .
    Remarque: Vérifiez que tous vos noms de classe CSS sont précédés de custom-icon-.
    Exemple de fragment de code permettant d'utiliser une police d'icône personnalisée:
    /* Specifying the custom icon font details */
   @font-face {
    font-family: 'custom-glyphicons';
    src: url('../fonts/custom-glyphicons.eot?uxyslh');
    src: url('../fonts/custom-glyphicons.eot?uxyslh#iefix') format('embedded-opentype'),
    url('../fonts/custom-glyphicons.ttf?uxyslh') format('truetype'),
    url('../fonts/custom-glyphicons.woff?uxyslh') format('woff'),
    url('../fonts/custom-glyphicons.svg?uxyslh#custom-glyphicons') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    
    .custom-glyphicons {
        font-family: 'custom-glyphicons' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
/* Specifying the font-family to display the icons */ 
    .custom-icon-test-icon_20:before {
      content: "\e900";
    }
  4. Testez votre personnalisation.