Cuando se le da a elegir entre usar un ícono de vector o una imagen estática, es una buena idea ir con el vector. Son pequeños y rápidos de cargar, y se pueden escalar a cualquier tamaño sin pérdida de resolución. Font Awesome es una excelente biblioteca de íconos vectoriales que puede usar en sus sitios web, y probablemente tengan casi cualquier forma o marca que necesite. ¿Y lo mejor de todo? Es gratis. Segundo a lo mejor de todo, es fácil.
Suscríbete a nuestro canal de Youtube
Usar la biblioteca Font Awesome en su sitio de WordPress es relativamente sencillo. Una vez que siga estos sencillos pasos, podrá reducir el tiempo de carga de la página y crear algunos diseños realmente limpios y nítidos utilizando estos íconos como parte de su trabajo.
Una cosa para recordar es que (la mayoría de las veces) los íconos de Font Awesome se enviarán a su sitio como fuentes reales. De ahí el nombre Font Awesome. Podrá diseñarlos y manipularlos de todas las formas en que normalmente podría hacerlo con un carácter de fuente, usando CSS a través de @font-face y la familia de fuentes Font Awesome .
Por eso, no tendrá que preocuparse por el tamaño o el espacio para cada navegador o ventana gráfica individual. Si suena genial, es porque lo es. Y así es como lo haces:
Instalación de Font Awesome
Si bien existe una forma manual de instalar y usar Font Awesome, existe una forma mejor para los usuarios de WordPress. La buena gente de FA ha lanzado un complemento oficial de Font Awesome para WordPress, y funciona maravillosamente .
Con el complemento instalado y activado, ahora tiene acceso al código abreviado [[icon name]], así como a los fragmentos de código HTML. Siempre que mantenga la práctica lista de íconos de FA para que sepa exactamente qué ícono necesita. Verá en la página de configuración del complemento (que se encuentra en Configuración – Font Awesome ) cómo se configuran las cosas de manera predeterminada. En general, estos están bien para mantener y usar. La mayoría de la gente no necesitará nada más.
La opción Método es probablemente la más importante para la mayoría de las personas. Puede alternar entre Webfont o SVG . Si bien SVG le brinda más poder y funciones (como transformaciones de poder y enmascaramiento), Font Awesome CDN entregará los íconos como archivos SVG y no como una fuente. Si bien eso es mejor en algunos aspectos, el SVG no es reconocido por tantos navegadores, ni WordPress siempre funciona bien con las imágenes SVG. Así que sugerimos ir a lo seguro con la versión webfont.
También lo hace Font Awesome, para el caso: si no está seguro de la diferencia, o no sabe por qué necesitaría usar SVG, probablemente lo más fácil sea seguir con el método de fuente web predeterminado.
Para usar los íconos de Font Awesome en su sitio de WordPress, es simple. Simplemente agregue <i class=”fab fa-wordpress”></i> en cualquier lugar donde desee que aparezca un icono. Asegúrese de consultar la biblioteca de iconos para saber qué nombre poner.
Nota: los códigos cortos en el complemento son impredecibles. Algunos íconos se muestran perfectamente bien, mientras que otros aparecen en blanco. Le recomendamos que se ciña a la inserción de HTML a menos que vea que el shortcode funciona para usted. Vea a continuación un ejemplo del ejemplo de WordPress anterior que no se procesa, mientras que el ícono de la cámara sí lo hace.
Y tu estas listo. El complemento Font Awesome WordPress es excelente para las personas que no se sienten cómodas ingresando a su tema o archivos para insertar el código que de otro modo sería necesario. Sin embargo, si se siente cómodo haciéndolo, puede seguir estas instrucciones para obtener los íconos de Font Awesome en su sitio.
Instalar iconos de Font Awesome manualmente
Lo primero que debe hacer es ir al sitio web de Font Awesome . Desde allí, haga clic en el botón Comenzar a usar gratis . Ofrecen planes pagos para personas que tienen sitios de alto tráfico y necesitan una solución empresarial, pero el público en general puede salirse con la suya con la versión gratuita. Obtiene 1500 íconos gratis y más de 5000 variantes en el plan Pro.
El siguiente paso es simplemente copiar/pegar. Pero querrá asegurarse de haber resaltado la opción de fuente web, tal como discutimos antes.
La mayoría de los temas tienen un lugar para que insertes código en el <head> del sitio automáticamente. En el caso de Divi , por ejemplo, iría a Opciones de tema – Integraciones y pegaría este código en el campo llamado Agregar código al encabezado de su blog .
|
01
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> |
Cuando presiona guardar, puede comenzar a incluir cualquiera de los íconos que desee, tal como lo hicimos anteriormente. Solo que no tiene acceso al código abreviado al hacer esto.
Si su tema no es compatible con la integración de código
Si no puede encontrar un lugar como este en su tema, también es igual de fácil hacerlo manualmente. Sin embargo, tendrá que profundizar en los archivos principales de su tema para hacerlo, pero es un copiar/pegar muy rápido y (generalmente) bastante seguro de hacer. Vaya a Apariencia – Editor en su panel de WP y busque el archivo header.php .
Encuentre la línea donde está escrito </head> , y antes de eso, debe pegar el mismo código de Font Awesome. Presione Actualizar archivo y podrá comenzar a usar los íconos FA inmediatamente. De nuevo, no obtienes un shortcode al instalar Font Awesome de esta manera.
Además, tenga en cuenta que cada vez que edite un archivo de tema, querrá usar un tema secundario . Al hacerlo, evita que se sobrescriban los cambios que ha realizado cuando se actualiza el tema.
Más opciones de instalación
Y si tiene otras necesidades más específicas para Font Awesome, ofrecen muchas formas de acceder a la biblioteca. Desde las instalaciones de NPM y Yarn , hasta la integración de Sketch y React , tienen un montón de opciones si lo necesita para algo más que WordPress.
Iconos impresionantes de fuente de estilo
Ahora que los tiene instalados, es hora de hacer que los íconos se destaquen. Puedes hacer esto usando CSS porque cada uno de los iconos se rige por una clase CSS. Los dos estilos más utilizados son el color y el tamaño . Puede incluir el estilo CSS en sus hojas de estilo o puede hacerlo en línea. En general, es posible que desee utilizar un estilo en línea porque los íconos como estos no tienden a ser universales en todo el sitio.
El sitio web de Font Awesome tiene ejemplos de cómo hacer esto. Muestran el tamaño usando su ícono de iglú y la clase adicional como fa-xs o fa-xl o fa-2x para un tamaño específico.
Además, si necesita que el ícono sea relativo a un tamaño específico y los valores absolutos no funcionan, puede colocarlo en su propio <div> para que funcione dentro de sus limitaciones.
|
01
02
03
|
<div style="font-size: 0.5rem;"> <i class="fas fa-igloo fa-10x"></i></div> |
Terminando
¡Y eso es! Impresionante, ¿verdad? Ya sea que esté utilizando el complemento de WordPress Font Awesome o insertando el código manualmente, no se necesitan más que unos pocos pasos para poner en funcionamiento su sitio. Font Awesome es popular por una razón, y parte de eso proviene de su facilidad de uso. ¡Así que sal y sé genial!
¿Cuál es tu forma favorita de usar los íconos de Font Awesome?
Imagen destacada del artículo cortesía de Font Awesome