Como Usar Iconos de Font Awesome en WordPress • Silo Creativo

Como Usar Iconos de Font Awesome en WordPress • Silo

Ciertamente te ha pasado que los iconos de redes sociales que tienes en tu WordPress no son de tu agrado por el hecho de que tienen un estética algo anticuada. O bien que quiere introducir un icono, mas verdaderamente no sabemos dónde descargarlo legalmente. Bueno, para estos inconvenientes, la solución es Font Awesome.

Los iconos de Font Awesome son un conjunto de iconos vectoriales escalables que se han transformado en un estándar web. En sitio de crear iconos adaptados o bien tener que buscar y / o bien adquirir un conjunto de iconos para su sitio, Font Awesome Icons Permítanos instalar, utilizar y personalizar iconos de manera fácil diferentes de su repositorio.

Estos iconos pueden ser empleados de manera libre por cualquier persona en un sitio, tema o bien complemento. Hasta que podemos emplearlos en proyectos que no guardan relación con el diseño web.

Si vamos a la página web de Font Awesome, podemos ver de qué manera tienen 2 tipos de licencias. Uno sin coste con mil trescientos ochenta y ocho iconos. Y una versión Pro, con cuatro mil trescientos cincuenta y siete iconos y 3 estilos. Para acceder a esta última versión, deberemos abonar una subscripción de $ sesenta por año. Esta subscripción incluye todas y cada una de las actualizaciones de Font Awesome a lo largo de este periodo. Si quieres más información, echa una ojeada a su página de costos y mira todos y cada uno de los iconos que incluye para poder ver si es la opción que más te es conveniente.

Pero, ¿por qué razón deberíamos utilizar Font Awesome en nuestro WordPress? encima de otros iconos, o bien bultos de iconos que existen en Internet? Responderemos a eso.

Índice

    ¿Por qué deberíamos añadir Font Awesome en WordPress?

    Las razones por las que es Es una gran idea añadir el catálogo Font Awesome son bien simples mas no menos buenos en eso. Podemos resumirlos en estos puntos:

    • Los iconos están en formato vectorial, con lo que van a ser con perfección perceptibles en cualquier pantalla y en cualquier resolución.
    • Son plenamente personalizables. Podemos mudar su tamaño, color e inclusive animarlos.
    • Funcionan en cualquier navegador, conque olvidémonos de cualquier incompatibilidad.

    increíble fuente nueva versión

    A lo que podríamos incluir una cuarta razón. Hace unas semanas charlamos sobre el formato vectorial SVG y su empleo en WordPress. Y en este artículo comentamos que debes llevar cuidado al añadir estos tipos de ficheros de sitios de terceros. Pero con Font Awesome podemos estar ya antes uno de los repositorios SVG más confiables que podemos hallar. Por lo tanto, cualquier temor que tengamos, se disipará de manera inmediata.

    De hecho, podemos descargar su catálogo desde el sitio de Font Awesome en un fichero comprimido. a fin de que podamos usa tus iconos en nuestro software de edición favorito. En mi caso, añadí Font Awesome en el panel de Recursos de Affinity Designer. Una buena forma de estar siempre y en todo momento a mano en mis proyectos,

    Una vez hecha esta pequeña introducción, expliquemos los métodos para lo que podemos utilizar Font Awesome en nuestro WordPress. Y como es frecuente, uno lo va a hacer de forma manual, al tiempo que el otro usará un complemento.

    Método 1: añada iconos de fuentes pasmantes manualmente

    La mejor manera si no deseamos recargar nuestros complementos de WordPress. Por supuesto, y como toda vez que vamos a agregue código en nuestro editor, aconsejamos hacerlo en un tema hijo de nuestra plantilla. Una vez hecha esta advertencia, sigamos.

    Ya sabemos que debemos ir, desde el panel de administración de WordPress, a Apariencia> Editor. Una vez dentro, en el explorador de ficheros de la derecha, vamos a buscar el fichero. Recursos temáticos, El functions.php. En este fichero, copiaremos el próximo fragmento de código:

    add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
    function enqueue_load_fa() {
    wp_enqueue_style( 'load-fa', 'https://use.fontawesome.com/releases/v5.3.1/css/all.css' );
    }

    Y salvamos. Ya tenemos fuentes increíbles completamente funcional En nuestra página. Vaya, aun me sorprendió lo veloz que fue. Pero el interrogante prosigue siendo: ¿de qué manera introducimos un icono de Font Awesome en una publicación de WordPress? Pasemos al siguiente parágrafo para poder ver esto.

    Dentro del sitio de Font Awesome, damos la galería completa de iconos. Si entramos en alguien, por ejemplo, el icono de WordPressVeremos que aparece un código HTML justo bajo el título.

    <i class="fab fa-wordpress"></i>

    Este es el código que debemos ingresar en nuestra entrada. De hecho, desde Font Awesome nos lo ponen más simple, y simplemente haciendo click en el código, lo vamos a pegar de forma automática en nuestro portapapeles.

    Un anuncio. Cuando pegamos este código en nuestra entrada, deberíamos debajo de la pestañita HMTL. Si hacemos esto en la pestañita Visual, Es posible que WordPress no lo reconozca y que a nosotros no nos lo parezca

    Te puede Interesar  Cómo optimizar imágenes para web con estas 12 herramientas

    Método 2: añada iconos de fuentes increíbles a través del complemento

    Ya sabemos que el repositorio de complementos de WordPress es casi infinito. Todo lo que precisamos en nuestro WordPress, prácticamente seguro busquemos una solución en forma de complemento. Font Awesome no es una salvedad. En esta ocasión tenemos el genial complemento Better Font Awesome de Mickey Kay. Lo bueno del complemento es que en sus actualizaciones añade los nuevos iconos que ingresan al catálogo de Font Awesome. Por lo tanto, pocas veces nos vamos a quedar atrás a la hora de acceder al repositorio de iconos original.

    el mejor complemento de fuente de wordpress impresionante

    Una vez que tengamos el complemento instalado y activado, vamos a crear una nueva entrada para emplearlo. Lo primero que nos va a llamar la atención es el nuevo botón existente a la derecha de agregar objeto. Su nombre deja claro para qué exactamente sirve: Insertar icono.

    insertar fuente iconos impresionantes entrada de wordpress

    Al hacer click en el botón, se van a abrir 2 opciones. en uno podemos explorar manualmente entre todos y cada uno de los iconos libres. Y el otro es un buscador, que nos va a facilitar mucho la vida si procuramos algo en específico y no deseamos perder demasiado tiempo.

    Y entre todo el catálogo existente, escojamos el icono de WordPress. Entonces cerramos el círculo. Una vez escogido, no vamos a ver el icono en ninguna parte. No tengamos temor. Un fragmento de código como este aparecerá en nuestro editor:

    [icon name="wordpress" class="" unprefixed_class=""]

    Si guardamos y conseguimos una vista anterior de nuestra publicación, nuestro icono de WordPress va a estar allá, cortesía de Font Awesome. El proceso de inserción es muy simple y visual. Pero, naturalmente, se vuelve un tanto vergonzoso si dejamos el icono de esta forma, con su color y tamaño originales. Entonces es hora de jugar con nuestros nuevos iconos.

    Cómo personalizar iconos de fuentes pasmantes en WordPress

    Para personalizar los iconos de Font Awesome, utilizaremos nuestro conocimiento de HTML y CSS. Si es nuevo en estos idiomas, le aconsejamos que consulte nuestro artículo sobre HTML y CSS para empezar. Esto indudablemente te va a sacar de dudas y te vas a sentir más cómodo al alterar los iconos.

    Cambiar el tamaño del icono

    Como afirmábamos al comienzo, los iconos de Font Awesome están en formato SVG, con lo que son plenamente escalables. ¿Y de qué manera cambiamos su tamaño? Muy simple, solo debes agregue una clase a nuestro código HTML que añadimos para introducir el icono. Si deseamos que el icono tenga el doble de tamaño, la clase para añadir el fa-2x. Si deseamos triple fa-3x. Y de esta forma hasta el infinito.

    Si hemos empleado el procedimiento manual, y deseamos duplicar su tamaño el icono de WordPress que utilizamos ya antes, el código resultante sería este:

    <i class="fab fa-wordpress fa-2x"></i>

    Y si añadimos Font Awesome a través de un complemento, tendríamos esto:

    [icon name="wordpress" class="fa-2x" unprefixed_class=""]

    Verá lo simple que es mudar el tamaño de un icono de Font Awesome. Pero no nos quedemos acá y demos un paso más. También cambiaremos su color.

    Cambiar el tono del icono

    Para mudar el color usemos algo de CSS. Solo vamos a tener, en el panel de administración de WordPress, Apariencia> Personalizar. Una vez que estemos adentro, añadiremos un CSS auxiliar. Tomemos este código como base:

    .fa-NOMBRE {
    color: COLOR;
    }

    En deberemos alterar 2 aspectos. donde ponemos NOMBRE, vamos a mudarlo por el nombre del icono que aparece en su código HTML. En este caso, wordpress. y donde afirma COLOR, insertemos el código de color HEX que deseamos que tenga el icono. Y como color, elijamos el habitual azul que rige el código de diseño de WordPress. Seamos conservadores y respetuosos a este respecto. Entonces, el código CSS que debemos añadir en el Personalizador ha de ser tal que:

    .fa-wordpress {
    color: #00a0d2;
    }

    Extremadamente simple mudar el color de cualquier icono, solo conozca su nombre. Te animamos a haz tus pruebasy que liberes tus conocimientos de CSS para añadir más atributos a los iconos.

    Por ejemplo, agréguele trasparencia, haga que tenga otro color cuando pasemos el cursor sobre el icono. Hasta que si deseamos dar un paso más, animarles. En uno de nuestros últimos SiloMags charlamos de Animist. Animist es una herramienta web en la que, de forma fácil, podemos escoger entre diferentes tipos de animaciones y asignarles unas peculiaridades. Su duración, retraso, dirección ... Y de forma automática, produce un código CSS que sencillamente va a haber que copiar y pegar en nuestro Personalizador. Nunca ha sido tan simple animar un factor en nuestro sitio.

    Como ha visto, añadir Font Awesome a WordPress y personalizar sus iconos son labores que podemos conseguir en un tiempo parcialmente corto. Y esto le va a dar un toque diferenciador a nuestra página web. Podemos hacer que los iconos coincidan mejor con la paleta de colores que tenemos en nuestro sitio. Puedes dejarnos en los comentarios.

    Artículos Relacionados

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

    Subir

    Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo. Más Información