Page d'accueil>Ressources de création de sites Web>Téléchargement de polices
Télécharger

Plugin iconpicker pour Craft CMS 3.x

Actuellement, le projet est interrompu . Cependant, n'hésitez pas à le fourrer et à poursuivre son développement!

Plugin d'artisanat qui fournit un nouveau type de champ qui offre aux utilisateurs un moyen facile de choisir une icône dans un fichier de police .woff ou .ttf. Vous pouvez facilement utiliser des ionicons ou des icônes impressionnantes de police

Remarque : Ce plugin peut devenir un module complémentaire payant lorsque le magasin de plugin d'artisanat devient disponible.

Exigences

  • Craft 3.0 (Beta 20) +
  • PHP 7.0+
  • PHENX PHP FONT Lib
  • Un ou plusieurs fichiers .TTF ou .Woff

Exemple

Exemple de l'utilisation du champ dans le modèle pour un utilisateur CMS

Capture d'écran

Exemple de la fenêtre de sélection

Capture d'écran

Installation

  1. Installer avec compositeur 

     composer require dolphiq/iconpicker

  2. Installez le plugin dans le panneau de configuration d'artisanat sous Paramètres> Plugins

  3. Ajoutez les actifs du plugin à votre application en ajoutant la ligne suivante au début de votre modèle: 

     {% do view.registerAssetBundle("plugins\dolphiq\iconpicker\assets\sharedAsset") %}

  4. Ajoutez les polices que vous souhaitez au répertoire suivant 

     /vendor/dolphiq/iconpicker/src/resources-shared/fonts

  5. Le type Iconpicker Field sera disponible lors de l'ajout d'un nouveau champ - Paramètres> champs> Ajouter un nouveau champ

Création d'un champ avec le type de champ iconpicker

  1. Choisissez le type Iconpicker Field
  2. Lors de l'ajout d'un nouveau champ avec le type Iconpicker Field , vous pouvez choisir la police que vous souhaitez utiliser pour ce champ à partir de la liste déroulante

En utilisant le type de champ iconpicker

  1. Ajoutez le champ à une disposition de champ (par exemple à une section)
  2. Vous pouvez maintenant choisir une icône lors de la création ou de la mise à jour d'une section

Échantillon d'utilisation dans un modèle de brindille

Exemple rapide code 

    {% do view.registerAssetBundle("plugins\dolphiq\iconpicker\assets\sharedAsset") %}
    <html style="padding: 0; margin: 0;">
    <head>
        <title></title>

        {{ head() }}

    </head>

    <body>

    {{ beginBody() }}

    {% if entry.iconPickerField.icon %}
        Hex: {{ entry.iconPickerField.icon }}<br>
        {{ entry.iconPickerField.iconSpan|raw }}
    {% endif %}

    {{ endBody() }}

    </body>
    </html>

Afficher une icône avec une classe personnalisée: 

 <span class='{{ entry.iconClass }} myCustomClass'>{{ entry.iconChar }}</span>
Propriétés du champ d'icônes

  1. Obtenez l'icône Unicode (décimal) 

     {{ entry.fieldName.icon }}

  2. Obtenez l'icône Unicode (hexadécimal) 

     {{ entry.fieldName.iconHex }}

  3. Affichez l'icône en tant que caractère HTML &#00000 

     {{ entry.fieldName.iconChar|raw }}

  4. Affichez l'icône en tant que personnage HTML Hex &#xf100 

     {{ entry.fieldName.iconCharHex|raw }}

  5. Affichez l'icône comme une portée avec le caractère et la classe de police 

     {{ entry.fieldName.iconSpan|raw }}

  6. Obtenez la classe de police icône 

     {{ entry.fieldName.iconClass }}

  7. Exemple conditionnel de l'affichage de l'icône uniquement lorsqu'il est défini 

     {% if entry.fieldName.icon %}
     {{ entry.fieldName.iconSpan|raw }}
{% endif %}

Feuille de route iconpicker

  • Sélectionnez et téléchargez les polices dans l'interface utilisateur
  • Activer la recherche (nom) lors de la sélection d'une icône

Contributeurs et développeurs

Lucas Weijers - Développeur original Johan Zandstra - Modifications mineures apportées par Dolphiq [email protected]

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout