TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Widget de iconos impresionantes de 4 fuentes para el sitio Weebly

29

El widget de iconos ayuda a crear un llamativo panel de llamada a la acción y muestra cualquier tipo de información. Dado que hay enormes conjuntos de iconos disponibles de forma gratuita a partir de varios recursos, es fácil mostrar la información necesaria utilizando un único icono atractivo en lugar de describir con texto más largo. Especialmente los íconos de fuentes impresionantes son una muy buena alternativa a las imágenes en este contexto. En este artículo, exploremos el proceso de creación de un widget de iconos impresionantes de fuentes para el sitio Weebly.

A continuación se muestra el widget (estilo 1) que tiene 4 íconos y puede agregar o eliminar los íconos que necesite.

Muestremos otros tres estilos más con variaciones:

Haga clic en el botón de descarga a continuación para obtener el código completo de todos los estilos del widget del panel de iconos. Y siga leyendo para saber cómo agregar estos widgets en su sitio Weebly.

Creación de un widget de iconos para el sitio Weebly

Tomemos un ejemplo de creación de un widget "Contáctenos" con las siguientes cuatro opciones:

  • Enviar correo electrónico
  • Llámanos
  • Chatea ahora
  • Visitar foro

Este es un widget de CSS puro donde convertimos una lista simple en un widget de íconos usando íconos impresionantes de fuentes. Cada widget de iconos contiene las siguientes partes:

  • Contenedor de panel (contiene los 4 elementos)
  • Columna: contiene un elemento individual
  • Artículo: contiene un icono y un encabezado
  • Icono – icono de fuente impresionante
  • Encabezado H2 que, de forma predeterminada, usa el estilo del elemento de título de Weebly.

Paso 1: definición de estilos para el widget de iconos

Primero definimos el ancho de la columna como 21% para que 4 elementos puedan caber en el ancho de su tema Weebly. Hemos eliminado las viñetas de las listas con la propiedad "list-style: none" y cada elemento de la lista tendrá un margen (inferior e izquierdo) con la izquierda flotante. Puede cambiar todos estos estilos para adaptarlos a su diseño. Tenga en cuenta que hemos utilizado un margen de 20px para crear espacio entre los elementos de la lista.

/* Individual Column */ .column { display:inline-block; float:left; margin:0 0 20px 20px; list-style:none; width:21%; }

A continuación, creamos paneles con un color de fondo común como "verde claro" junto con estilos para los elementos de la lista (ul y li). Usamos "border-radius: 10px;" para crear esquinas redondeadas para paneles, elimine esta línea si desea mostrar iconos cuadrados.

/* Panel */ #panel { position:relative; z-index:1; } #panel ul li { text-align:center; border:1px solid; } #panel ul li *{ margin:0; padding:0; } #panel ul li .icon { margin-bottom:28px; } #panel ul li article { display:block; padding:30px 0 15px 0; } #panel ul li { color:#464646; background-color: lightgreen; border-color:#D7D7D7; border-radius: 10px; } #panel ul li a { color:inherit; } #panel ul li:hover a { color:#51C4BE; }

El siguiente paso es definir los estilos para los increíbles iconos de fuentes como se muestra a continuación. Hemos utilizado el ancho y la altura de los botones de icono como 130px, el radio del borde como 50% para hacerlos circulares y el tamaño del icono como 46px. Puede eliminar el radio del borde para hacer los iconos en formato cuadrado y aumentar / disminuir el tamaño del icono cambiando el atributo de tamaño de fuente.

/* Button */ .icon { display:inline-block; } .icon i { position:relative; width:130px; height:130px; line-height:130px; z-index:1; } .icon i, .icon i::after { border-radius:50%; } .icon .fa { font-size:46px; } .icon i::after { position:absolute; top:15px; right:15px; bottom:15px; left:15px; border:1px solid; content:""; z-index:-1; } .icon i { color:#FFFFFF; background-color:#51C4BE;/* IE9 Fallback */ background:linear-gradient(to top right, #256D6A, #51C4BE); } .icon i::after { border-color:rgba(255,255,255,.5); } .icon:hover i::after { background-color:#51C4BE; } #panel ul li:hover .icon i { text-shadow:0 1px 0 #CCCCCC,0 2px 0 #333333,0 1px 0 #BBBBBB,0 4px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25) } #panel ul li:nth-child(1):hover .icon i::after { background-color:#F9CD36; /* Yellow */ } #panel ul li:nth-child(2):hover .icon i::after { background-color:#FF7659; /* Orange */ } #panel ul li:nth-child(3):hover .icon i::after { background-color:#9771BD;/* Purple */ } #panel ul li:nth-child(4):hover .icon i::after { background-color:#F36174;/* Red */ }

Los colores amarillo, naranja, morado y rojo se utilizan para los iconos de color que también se pueden cambiar según sus necesidades. El último paso en la parte CSS del widget es agregar consultas de medios para que el widget responda en dispositivos móviles.

/* Media Queries */ @media screen and (max-width:750px){ #panel ul li { display:inline-block; float:left; width:48.46625766871166%; margin:0 3.06748466257669% 15px 0;} #panel ul li:nth-child(even){ margin-right:0; clear:right; } } @media screen and (max-width: 450px){ #panel ul li { display: block; float: none; width: 95%; } }

Paso 2: agregar CSS en el sitio de Weebly

Puede descargar la fuente completa del archivo CSS que se denomina "icons_style.css" y cargarlo en su sitio Weebly en "Tema> Editar HTML / CSS > Activos" (también puede cargar el archivo en la sección). La ruta del archivo subido de su archivo CSS será " http://yoursite.com/files/theme/icons_style.css ". Además de este archivo CSS, también necesitamos un archivo CSS impresionante de fuentes y debe vincular ambos archivos en la página requerida.

Widget de iconos impresionantes de 4 fuentes para el sitio Weebly

Cargar archivo en el editor de código Weebly

Ahora vaya a la página en la que desea agregar el widget y vincule los dos archivos CSS como se muestra a continuación en la sección "Páginas> Elija su página> Configuración de SEO > Código de encabezado".

Widget de iconos impresionantes de 4 fuentes para el sitio Weebly

Agregar código de encabezado en la página

<link href="/files/theme/icons_style.css" rel="stylesheet" type="text/css" media="all"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Paso 3: agregar HTML

El último paso es agregar el código HTML requerido dentro del elemento " Código incrustado " en su página de Weebly. El ejemplo anterior se trata en "Iconos Widget 1.html" que puede obtener de los archivos fuente descargados. Haga clic derecho y copie el código HTML fuente y péguelo dentro del elemento "Código incrustado". No olvide eliminar los dos primeros enlaces CSS del código fuente HTML que se utilizan con fines de demostración. El código HTML debería tener el siguiente aspecto:

<div id="panel"> <ul> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-envelope"></i></a> <h2><a href="#">Send Email</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-phone"></i></a> <h2><a href="#">Call Us</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-comments"></i></a> <h2><a href="#">Chat Now</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-group"></i></a> <h2><a href="#">Visit Forum</a></h2> </article> </li> </ul> </div>

Widget de personalización de iconos

Todos los estilos requeridos se definen en el archivo "icons_style.css" que puede personalizar según sus necesidades. Hemos agregado otros tres ejemplos en la descarga de código fuente donde usamos estilos en línea para modificar los elementos requeridos manteniendo el "icons_style.css" como está.

  • Utilice Icon Widget 2.html para diferentes fondos de cada panel.
  • Pruebe Icon Widget 3.html para paneles de fondo blanco con diferentes iconos de colores degradados.
  • Utilice Icon Widget 4.html con iconos sociales sin borde de panel.

Puede cambiar el texto / íconos en HTML y consultar la lista de íconos impresionantes de fuentes para elegir el ícono que necesita.

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More