Inicio>Recursos para la creación de sitios web>Descarga de fuentes
Descargar

IconPicker Plugin for Craft CMS 3.x

Actualmente, el proyecto se suspende . Sin embargo, ¡no dude en bifurcarlo y continuar su desarrollo!

Complemento de artesanía que proporciona un nuevo tipo de campo que ofrece a los usuarios una manera fácil de elegir un icono de un archivo .woff o font .ttf. Puedes usar fácilmente ionicons o iconos impresionantes de fuentes

Nota : Este complemento puede convertirse en un complemento pagado cuando la tienda de complementos de manualidades esté disponible.

Requisitos

  • Craft 3.0 (beta 20)+
  • PHP 7.0+
  • Phenx Php Font lib
  • Uno o más archivos .ttf o .woff

Ejemplo

Ejemplo del uso de campo en la plantilla para un usuario de CMS

Captura de pantalla

Ejemplo de la ventana emergente de selección

Captura de pantalla

Instalación

  1. Instalar con el compositor 

     composer require dolphiq/iconpicker

  2. Instale el complemento en el panel de control de artesanía en Configuración> Plugins

  3. Agregue los activos del complemento a su aplicación agregando la siguiente línea al comienzo de su plantilla: 

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

  4. Agregue las fuentes que desee al siguiente directorio 

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

  5. El tipo Iconpicker Field estará disponible al agregar un nuevo campo - Configuración> Campos> Agregar nuevo campo

Crear un campo con el tipo de campo IconPicker

  1. Elija el tipo Iconpicker Field
  2. Al agregar un nuevo campo con el tipo Iconpicker Field , puede elegir qué fuente desea usar para ese campo desde el menú desplegable

Usando el tipo de campo IconPicker

  1. Agregue el campo a un diseño de campo (por ejemplo, a una sección)
  2. Ahora puede elegir un icono al crear o actualizar una sección

Muestra de uso en plantilla de ramas

Código de ejemplo rápido 

    {% 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>

Muestre un icono con una clase personalizada: 

 <span class='{{ entry.iconClass }} myCustomClass'>{{ entry.iconChar }}</span>
Propiedades del campo de icono

  1. Obtenga el icono Unicode (decimal) 

     {{ entry.fieldName.icon }}

  2. Obtenga el icono unicode (hexadecimal) 

     {{ entry.fieldName.iconHex }}

  3. Muestre el icono como personaje HTML &#00000 

     {{ entry.fieldName.iconChar|raw }}

  4. Muestre el icono como personaje HTML Hex &#xf100 

     {{ entry.fieldName.iconCharHex|raw }}

  5. Muestra el icono como el tramo con el personaje y la clase de fuente 

     {{ entry.fieldName.iconSpan|raw }}

  6. Obtenga la clase de fuente de iconos 

     {{ entry.fieldName.iconClass }}

  7. Ejemplo condicional de mostrar icono solo cuando se establece 

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

Hoja de ruta iconpicker

  • Seleccione y cargue las fuentes en la interfaz de usuario
  • Habilitar (nombre) Búsqueda mientras elige un icono

Colaboradores y desarrolladores

Lucas Weijers - Desarrollador original Johan Zandstra - Cambios menores que le traen dolphiq [email protected]

Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo