Las fuentes de iconos se utilizan para incluir ciertos iconos estándar en el contenido de su sitio web. los Fuente 'Awesome' es un buen ejemplo que ofrece muchas ventajas sobre otras fuentes de iconos. También sugerimos usar Fuentes de iconos de Freepik como buena alternativa.
Font Awesome fue diseñado originalmente por david gandy para usar con Bootstrap de Twitter. Font Awesome se puede usar con WordPress usando el Complemento Font Awesome Icons diseñado por raquel panadero.
Aquí hay una breve introducción a tales fuentes y donde la fuente Awesome encaja en un estilo que aún puede estar en su infancia.
Por qué utilizar fuentes de iconos
Cuando diseña un sitio web, las imágenes ocupan mucho espacio web debido al tamaño de sus archivos. También deben aparecer en sus páginas web mediante marcado HTML. No solo eso, sino que su escala es con frecuencia un problema, perdiendo definición a medida que aumentan de tamaño. Una imagen normal solo se resuelve según lo previsto cuando se usa en sus dimensiones originalmente diseñadas.
Cuando busca imágenes de íconos estándar, como vehículos, ciertos caracteres de puntuación o íconos de gráficos, las fuentes de íconos pueden ofrecerle imágenes escalables que se ven iguales independientemente del tamaño de la fuente. Esto es así como las letras y los números parecen iguales independientemente de si utiliza un tamaño de fuente de 2 o 5 o de 10 o 24 puntos.
En muchos casos, la gente simplemente no usa imágenes debido a este problema, y su artículo o informe en línea sufre en detalle o claridad debido a ello. Al usar Font Awesome, pueden agregar íconos básicos a sus sitios y escalarlos al tamaño requerido, limitado solo por las dimensiones de sus documentos, y pueden hacerlo sin perder definición. Puede ver los iconos escalables de la misma manera que los caracteres de fuente escalables.
Aquí hay una selección del reproductor de video y los íconos sociales disponibles:
Y también los nuevos iconos que vienen con la versión 3.0:
Cada uno de estos se puede aumentar de tamaño sin pérdida de definición. Puede cambiar su color y agregar sombras fácilmente y cambiar su transparencia. De hecho, puede hacer con ellos cualquier cosa que pueda con imágenes, y algo más, sin las desventajas del tamaño del archivo.
Eso es básicamente lo que pueden hacer las fuentes de iconos, y la fuente Awesome en particular. Aquí hay información sobre cómo usarlos y aprovecharlos al máximo, y también una o dos desventajas asociadas con los frentes de iconos:
Usando Font Awesome
Con CSS normal de Bootstrap:
Font Awesome se puede usar con el Bootstrap CSS predeterminado copiando el directorio de fuentes Awesome en su proyecto y luego copiando font-awesome.min.css en el proyecto. Luego debe abrir font-awesome.min.css y editar las rutas de las fuentes para asegurarse de que apunten a la ubicación Awesome.
En la sección Head de su HTML, la ubicación de font-awesome.min.css debe estar referenciada así:
La ruta de la fuente es relativa a su directorio CSS.
Con Bootstrap Less:
Si está utilizando Twitter Bootstrap con MENOS CSS, primero copie el directorio de fuentes Font Awesome en su proyecto y font-awesome-less en su directorio Bootstrap Less. Luego:
- a) Abra bootstrap.less y reemplace @import "sprites.less"; con @import "font-awesome.less";
- b) Abra font-awesome.less de su proyecto y edite la variable @FontAwesomePath para que apunte a su directorio de fuentes.
@FontAwesomePath: "../font";
La ruta de la fuente es relativa a su directorio CSS compilado.
Entonces ya está todo listo, aunque si está utilizando un compilador estático, debe volver a compilar MENOS.
Sin usar Bootstrap:
Si no está utilizando Bootstrap, luego de copiar el archivo de fuente en el directorio de su proyecto, puede copiar cualquiera de los dos archivos de fuentes impresionantes en su proyecto, abrirlo y editar la ubicación de la fuente para que apunte al directorio de fuentes.
Si está utilizando Internet Explorer 7, utilice font-awesome-ie7.min.css
Cómo usar Font Awesome en WordPress
Hay dos formas fáciles de usar fuentes de iconos en WordPress, una de las cuales ha cargado el complemento *. Puede incrustarlos usando HTML o usar shortcode. Aquí hay ejemplos de cada uno:
Usando HTML: Donde desee que aparezca la fuente, simplemente agregue el nombre del elemento al nombre de la clase así: [html] [/ html]
agregará un círculo negro.
Puede cambiar el tamaño del círculo así:
Probablemente le resulte más fácil agregar el tamaño de fuente a su hoja de estilo CSS si tiene la intención de usar el mismo tamaño de icono con frecuencia y el formato anterior para las excepciones.
Usando Shortcode: El código abreviado es más fácil, pero generalmente solo funcionará para el contenido de la publicación y la página en la pantalla del editor de publicaciones. El formato es [nombre del icono = círculo del icono] donde desea el círculo.
La desventaja de las fuentes de iconos
Las fuentes de iconos parecen excelentes para usar cuando necesita agregar un icono específico a su blog o sitio web, y se pueden vincular para llevar a cabo funciones específicas. Sin embargo, no todo es perfecto y las fuentes de iconos también tienen desventajas. Estos son los problemas comunes que informan los usuarios de fuentes de iconos que no se aplican a Font Awesome, por eso es tan 'Awesome!'
- Uno es el problema potencial con los lectores de pantalla que pueden leer en voz alta el icono como una letra alfabética. Esto no es un problema con Font Awesome debido a la forma en que se recuperan los caracteres de la fuente.
- Pueden presentarse en un solo color, o en un degradado de color utilizando degradados CSS3. ¿Es ese un problema genuino con las fuentes de iconos?
- Puede llevar tiempo crear una fuente personalizada que se adapte a sus necesidades. Sin embargo, ya existe una gran selección de fuentes increíbles que ofrece Font Awesome, y la lista se amplía continuamente. Aunque es una fuente gratuita de código cerrado, las fuentes aprobadas diseñadas por los usuarios se agregan con regularidad.
Resumen del generador de Font Awesome
El generador Font Awesome es una de las mejores fuentes de iconos gratuitas disponibles actualmente. Aunque fue diseñado para su uso con Twitter Bootstrap, se puede adaptar para su uso en sitios web regulares y también hay un complemento de WordPress disponible que ofrece lo mejor de esta fuente de iconos. Si utiliza fuentes de iconos, pruebe Font Awesome porque es posible que se sorprenda gratamente una vez que lo domine.
* El complemento de WordPress Font Awesome Icons está disponible en https://github.com/rachelbaker/
Vivek Nath.R
En mi blog estoy usando el complemento de fuentes Wp Exclusive Icon http://wordpress.org/extend/plugins/wp-elusive-iconfont/
La ventaja es que tiene más opciones de personalización como cambiar el color, el tamaño, la orientación, etc. y también tiene muchos otros iconos. Compruébalo.
Rajesh Namase
Gracias Vivek por compartir este complemento de WordPress con nuestros lectores.
james dresen
Hola Vivek, gracias por compartir el complemento, estoy buscando algo como esto. También probaría Font Awesome Icons para ver cuál es el adecuado para mí. Buen artículo Rajesh, ¡por favor sigue así! Todo lo mejor para usted.
Rajesh Namase
También intente usar el complemento de WordPress Font Awesome :)
Andy
Hola, solo estaba buscando algo como esto, ya que soy demasiado vago para crear todas estas clases y agregar los estilos y las imágenes al tema. ¡¡Gracias!!
Vipin
Gracias tanto a Vivek como a Rajesh, ambos proporcionaron la información que estaba buscando.
rohit chougale
hola rajesh
'Dime si podemos reproducir videos en php en línea si es así, entonces dime cómo ...
Rajesh Namase
Puede intentar usar etiquetas de video HTML 5 :) Y es fácil usar HTML 5 con PHP :)
Vaibhav
Definitivamente agrego este complemento a mi cuenta de wordpress.
gracias admin ..!
anand hittinali
Bueno, no soy un hombre de muchas palabras, por lo que este complemento es realmente útil para mí. gracias por compartir este complemento.
Lily
¿Hay un complemento para estas cosas? Wow increíble la primera vez que lo escucho. Gracias por compartir esto.
Mohsin Ali
Complemento muy interesante Rajesh de dónde sacaste estas ideas únicas.
david croft
Hola,
gracias por este lindo blog, porque este tema de “Fuentes de iconos” es muy nuevo para mí, así que puedo conocer muchas cosas nuevas y palabras nuevas dentro de tu blog.
El generador de fuentes es realmente la mejor fuente de íconos gratuita que está disponible actualmente. por lo que es muy útil.
David Johnson
Para su información, utilizó el término "generador de Font Awesome", pero su artículo cubre Font Awesome en sí, no un generador. La palabra "generador" tiene un significado específico en el contexto de las fuentes de iconos. Ejemplos de generadores de fuentes de iconos que admiten Font Awesome incluyen icnfnt y Fontello.
Rajesh Namase
Bien, hemos actualizado el título del artículo, gracias.
Carlton
Dejó de lado una desventaja importante de las fuentes de iconos: no se degradan con gracia. Todos los usuarios que tienen la descarga de fuentes deshabilitada (porque son conscientes de la seguridad, solían ser conscientes de la seguridad y se olvidaron, o fueron configurados por otra persona que estaba consciente de la seguridad y no lo saben) simplemente ven símbolos de glifos vacíos y feos. Para ser un usuario responsable de fuentes de iconos, debe aceptar arrojar a esos usuarios debajo de un autobús.
Ayush Agrawal
Este artículo parece un poco antiguo, pero me gustaría decir que una buena forma de usar font awesome es usar su cdn: //netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css .
Ayuda a los blogueros que buscan reducir los tiempos de carga.
Vikas
Buen post, Font Awesome es uno de los mejores desarrollos en el mundo del diseño.
Mark Fox
Gracias por compartir. Estoy más inclinado a usarlo ahora.
Gaurav Dutt
¡Hombre! 2013, ¿cómo podría no haber visto esto antes pero aun así funcionó a la perfección para mí? Gracias por esto.