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

¿Cómo utilizar los iconos de Font Awesome en Weebly?

2

Los íconos impresionantes de fuentes son íconos vectoriales escalables desarrollados originalmente para usar con el marco Bootstrap y luego disponibles para otros. Como su nombre indica, los iconos de Font Awesome son simplemente increíbles para usar en cualquier lugar de su sitio para múltiples propósitos. Los íconos son escalables, lo que significa que puede usar el mismo ícono en diferentes tamaños sin perder la calidad de la pantalla. En este momento, Weebly ofrece cualquier opción predeterminada para agregar fuentes de iconos a los elementos de su sitio. En este artículo, discutiremos por qué y cómo usar íconos increíbles de fuentes en el sitio de Weebly.

¿Por qué debería considerar el uso de iconos de fuentes?

Hay varias razones por las que debería considerar el uso de iconos de fuentes:

  • Los iconos son de uso gratuito para usos personales y comerciales.
  • No necesita una imagen y JavaScript para hacer un icono, lo que mejora el tiempo de carga del sitio.
  • El aspecto del icono se puede personalizar completamente con CSS.
  • Se pueden utilizar diferentes tamaños de iconos con una resolución perfecta.
  • Muy atractivo en dispositivos con pantalla retina.

Es posible que esté viendo el uso de íconos de fuentes en otras plataformas como WordPress y se pregunte cómo se puede hacer esto en el sitio de Weebly.

¿Cómo utilizar los iconos de Font Awesome en Weebly?

Aunque hay muchas formas de usar íconos de fuentes increíbles, explicaremos dos métodos simples:

  • Usando Bootstrap CDN desde cualquier servicio CDN como MaxCDN
  • Alojamiento de iconos impresionantes de fuentes en su propio sitio

Usando Bootstrap CDN

Esta es la forma más simple, confiable y fácil de usar íconos de fuentes increíbles en su sitio sin ningún problema. Solo necesita vincular la siguiente hoja de estilo en la sección de encabezado de su página o sitio.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Recomendamos vincular la hoja de estilo en la sección de encabezado de cualquiera de sus páginas en la pestaña "Páginas" antes de implementarla en el sitio activo. Posiblemente, pueda crear una página de prueba oculta a los motores de búsqueda o crear un sitio de prueba y vincular la hoja de estilo en la sección de encabezado debajo Pestaña “Configuración" Tenga en cuenta que los íconos de fuentes impresionantes funcionarán en un sitio gratuito de Weebly y no hay necesidad de planes premium para este propósito.

Alojamiento en su sitio

En lugar de usar Bootstrap CDN CSS, también puede descargar los archivos de fuentes completos y CSS desde la página de inicio del sitio de fuentes impresionantes en Github. Cargue todas las carpetas en su sitio Weebly editando el código HTML / CSS. Asegúrese de cargar todo tipo de fuentes y archivos CSS como se muestra en la siguiente imagen:

¿Cómo utilizar los iconos de Font Awesome en Weebly?

Cargar archivos de Font Awesome en Weebly

Vincula el archivo CSS a la sección de encabezado de la página requerida o al nivel del sitio.

<link rel="stylesheet" href="http://yoursite.weebly.com/files/theme/font-awesome.min.css">

Puede utilizar un archivo .css o un archivo .min.css. Se recomienda la versión minificada en el sitio en vivo, ya que mejora el tiempo de carga del sitio.

Ejemplos de uso de iconos de fuentes

Una vez que haya decidido si cargar las hojas de estilo y las fuentes o usar el CDN CSS, el siguiente paso es usarlo en su página usando el elemento "Código incrustado".

Tomemos un ejemplo de cómo agregar un ícono de engranaje en su página, el formato para agregar un ícono impresionante de fuente es simple como a continuación:

<i class="fa fa-phone-square"></i> This is a font awesome phone icon.

La sintaxis contiene tres partes:

  • … – cada icono debe usarse dentro de la etiqueta.
  • fa – prefijo de clase CSS impresionante de fuente.
  • fa-phone-square: nombre real del icono.

La salida del código anterior pegado dentro del elemento "Código incrustado" será como se muestra a continuación:

¿Cómo utilizar los iconos de Font Awesome en Weebly?

Ejemplo de icono de fuente impresionante en Weebly

Aumento del tamaño del icono

Hay cinco clases de CSS para aumentar el tamaño del icono como se muestra a continuación:

<i class="fa fa-phone-square fa-lg"></i> Increases the icon size by 33% <i class="fa fa-phone-square fa-2x"></i> Increases the icon size by 2x <i class="fa fa-phone-square fa-3x"></i> Increases the icon size by 3x <i class="fa fa-phone-square fa-4x"></i> Increases the icon size by 4x <i class="fa fa-phone-square fa-5x"></i> Increases the icon size by 5x

Personalizaciones ilimitadas

Una vez que aprendas a usar los íconos de fuentes, hay muchas formas útiles en que se pueden usar en un sitio. Por ejemplo, puede agregar una lista como se muestra a continuación:

<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List item 1</li> <li><i class="fa-li fa fa-check-square"></i>List item 2</li> <li><i class="fa-li fa fa-check-square"></i>List item 3</li> <li><i class="fa-li fa fa-check-square"></i>List item 4</li> </ul>

A la lista le gustará a continuación:

¿Cómo utilizar los iconos de Font Awesome en Weebly?

Lista de iconos de fuentes

Puede consultar los ejemplos para comprobar qué tan fácil es agregar muchas funciones en su sitio con iconos de fuentes. Consulte también la hoja de referencia para obtener rápidamente los nombres de los iconos. También puede utilizar Unicode en lugar del nombre del icono. Por ejemplo, en el ejemplo anterior del icono de lista, en lugar de utilizar el nombre del icono fa-check-square, puede utilizar su valor Unicode equivalente .

Fuente de grabación: 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