\u00bfD\u00f3nde Encontrar los Icon Fonts?<\/h2>\n
Hay muchos excelentes lugares para encontrar icon fonts para su sitio de WordPress. S\u00f3lo escriba \u201cicon font\u201d en Google y este le brindar\u00e1 algunos buenos resultados. Uno de los m\u00e1s populares y m\u00e1s usados es Font Awesome<\/a>. Al momento de que se escribiera este articulo, dicho font tenia m\u00e1s de 1,400 iconos gratuitos, y tambi\u00e9n, m\u00e1s de 4,500 iconos en su versi\u00f3n pro. Este incluye iconos de casi todo, desde los de interfaz, sociales, flechas, y muchos otros tipos de icono.<\/p>\n Aqu\u00ed hay otros que puede chequear:<\/p>\n Primero, nos adentraremos en algunas de las formas m\u00e1s r\u00e1pidas y sencillas para usar font icons de WordPress. S\u00f3lo una advertencia, no todas estas son las mejores trat\u00e1ndose de desempe\u00f1o. Para esto, le recomendamos saltarse a la secci\u00f3n del mejor m\u00e9todo<\/a>.<\/p>\n La forma m\u00e1s r\u00e1pida para comenzar a utilizar los font icons de WordPress es simplemente usando un plugin externo. El plugin gratuito de Font Awesome Integration<\/a> contiene la m\u00e1s reciente biblioteca de iconos de Font Awesome 5. Despu\u00e9s de instalarlo y activarlo, lo \u00fanico que requiere es un simple shortcode para insertar el icono. Incluso, \u00a1ya cuentan con un icono de WordPress! Genial.<\/p>\n Puede chequear la tabla de uso b\u00e1sico<\/a> de Font Awesome 5 para descubrir formas adicionales para utilizar y personalizarlo, al igual podr\u00e1 encontrar su biblioteca de iconos. Por ejemplo, en la parte de abajo insertamos el icono de Font Awesome de WordPress en un bloque de shortcode de Gutenberg<\/a> agregamos As\u00ed es como se ve en el front-end. Bastante sencillo, \u00bfno? Tenenemos un icono de Font Awesome funcionando en nuestro sitio en tan s\u00f3lo unos minutos.<\/p>\n Si lo que usted quiere es un mont\u00f3n de shortcodes sencillos de usar, podr\u00eda ver el plugin de Shortcodes Ultimate<\/a>. Ellos tienen un addon de iconos premium que puede utilizar.<\/p>\n Lo anterior es una excelente soluci\u00f3n si quiere que sus clientes agreguen iconos a publicaciones o p\u00e1ginas, pero si quiere utilizar estos elementos dentro de su tema o plugin es mejor ponerlos en la fila usted mismo (hablaremos un poco m\u00e1s de esto m\u00e1s adelante).<\/p>\n Dashicons<\/a> es un conjunto de iconos incluidos por omisi\u00f3n, ya que WordPress los utiliza en el backend. Usted necesitar\u00e1 ponerlos en la fila del front-end, pero lo \u00fanico que necesitar\u00e1 ser\u00e1 el nombre del script, el archivo ya se encuentra disponible en WordPress.<\/p>\n Puede agregar lo siguiente a su archivo Luego puede ir al sitio web de Dashicons<\/a>, seleccionar un icono y dar clic en enlace de \u201ccopiar HTML\u201d el cual la dar\u00e1 el c\u00f3digo que usted necesita para mostrar el icono. No tienen una amplia selecci\u00f3n, pero a\u00fan as\u00ed funcionan muy bien y son muy livianos.<\/p>\n Por ejemplo, en la parte de abajo insertamos el icono de dashboad en un bloque de HTML de Gutenberg<\/a>.<\/p>\n As\u00ed es como aparece en el front-end.<\/p>\n Dashicons no tiene shortcodes geniales de inmedito, pero puede personalizar el tama\u00f1o de sus iconos con CSS<\/a>. Aqu\u00ed le dejamos un ejemplo de c\u00f3mo se inserta un icono justo antes del encabezado.<\/p>\n Su tercera opci\u00f3n es enlazar manualmente\u00a0 a icon fonts externamente alojado. Esto es esencialmente lo que el plugin en la opci\u00f3n anterior hace detr\u00e1s de escena.<\/p>\n Para Font Awesome, usted puede agarrar el c\u00f3digo de su p\u00e1gina de Inicio<\/a> y luego seguir los siguientes pasos. Ellos le alojar\u00e1n a todos sus fonts (fuentes) en CDN<\/a>, completamente gratis. Lucir\u00e1 de esta manera:<\/p>\n Paso 1<\/strong><\/p>\n Copie el c\u00f3digo en el Paso 2<\/strong><\/p>\n Luego pude empezar a colocar iconos en el Mientras que no hay nada malo en utilizar una de las formas anteriores para agregar icon fonts a su sitio, t\u00e9cnicamente, tampoco son la mejor forma de hacerlo. \u00bfPor qu\u00e9? Todo est\u00e1 relacionado a problemas de desempe\u00f1o<\/strong>.<\/p>\n En primer lugar, cuando use un plugin para las fuentes de iconos o un enlace a una biblioteca de fuentes de iconos externa, cargar\u00e1 todos los iconos de toda la biblioteca. Si solo est\u00e1 usando 20 o m\u00e1s iconos en todo su sitio, esto se puede manejar de una manera mucho mejor.<\/p>\n\n Por ejemplo, hemos incluido la biblioteca de Font Awesome 5 en nuestro sitio y mientras que el archivo CSS para este es peque\u00f1o archivo de fuente en s\u00ed, es de 108 KB. Mientras que esto podr\u00eda parecer poca cosa, podr\u00e1 ver m\u00e1s adelante, qu\u00e9 tan peque\u00f1os pueden ser estos archivos cuando s\u00f3lo elegimos los Fuentes HTML<\/a> que realmente utilizaremos.<\/p>\n Segundo, no hay nada de malo en cargar scripts de distintas CDNs. Sin embargo, si usted tiene la opci\u00f3n de cargarlo de una CDN, esto es usualmente m\u00e1s r\u00e1pido. \u00bfPor qu\u00e9? Porque este toma ventaja de una sola conexi\u00f3n HTTP\/2<\/a> y reduce las b\u00fasquedas adicionales de DNS<\/a>. \u00a1S\u00f3lo aseg\u00farese de que su CDN principal sea una buena!<\/p>\n Por las razones de desempe\u00f1o antes mencionadas, le guiaremos para que pueda alojar a sus icon fonts, como tambi\u00e9n a c\u00f3mo utilizar s\u00f3lo los que necesita. Al decir localmente, nos referimos a cargarlos del servidor de su host de WordPress o en su propia CDN.<\/p>\n Al elegir, s\u00f3lo los icon fonts que usted necesita, esto puede reducir el tama\u00f1o del archivo de 100 KB a unos cuantos kilobytes<\/strong>, \u00a1bastante \u00fatil! A\u00fan mejor: puede mezclar y emparejar iconos de varios conjuntos de fuentes.<\/p>\n El usar un font icon involucra hospedar al archivo de la fuente (WOFF, WOFF 2, etc.) en el servidor web, luego utilizar el CSS<\/a> para cargar la cara de la fuente, luego crear algunas marcas para agregar los iconos a su lugar correcto.<\/p>\n Mientras que su sitio cargar\u00e1 un solo archivo, usted terminar\u00e1 teniendo un gran n\u00famero de formas de archivo para cada fuente ya que algunos navegadores utilizan distintos formatos. Font Awesome tiene 6 distintos formatos de archivo, incluidos: EOT, SVG, TTF, WOFF, WOFF 2 y OTF. Sin embargo, basado en el soporte del navegador, realmente s\u00f3lo necesita WOFF o WOFF 2.<\/p>\n Consejo: WOFF es soportado<\/a> por m\u00e1s del 93% de todos los navegadores modernos. Sin embargo, WOFF 2 ha sido compreso a\u00fan m\u00e1s, pero s\u00f3lo es soportado<\/a> por un poco m\u00e1s del 83% de los navegadores modernos. Nosotros recomendamos elegir uno o el otro o los dos. El navegador determinar\u00e1, basado en su c\u00f3digo, cu\u00e1l entregar\u00e1 al cliente.<\/p>\n Su primera tarea es utilizar una herramienta para elegir s\u00f3lo los iconos que usted quiera. Luego, puede agregar estos archivos al directorio de su proyecto en alg\u00fan lado, t\u00edpicamente en un directorio de fuentes.<\/p>\n Luego, usted debe agregar el archivo CSS de Font Awesome a su proyecto y agregarlo a su sitio web, utilizando un antiguo elemento regular de un enlace.<\/p>\n Tambi\u00e9n puede poner en fila el archivo CSS o si es muy peque\u00f1o, simplemente utilizarlo en la l\u00ednea.<\/p>\n Si ve el archivo CSS podr\u00e1 ver lo que est\u00e1 pasando en el fondo. Los archivos de la fuente son cargados, el elemento b\u00e1sico con la clase de Lo \u00fanico que tiene que tener en cuenta es la trayectoria de los archivos de sus fuentes. Por defecto, estos son cargados desde Ahora que tiene una mejor idea de como funciona, le guiaremos, paso a paso, para que aprenda a hacer esto. En este ejemplo, usaremos un sitio de producci\u00f3n de ecommerce.<\/p>\n Primero, usted deber\u00eda determinar qu\u00e9 biblioteca de font icon querr\u00e1 usar. Hemos compartido algunas que nos gustan al principio de este articulo. En este ejemplo, estaremos utilizando Font Awesome junto con el generador de fuentes de IcoMoon<\/a>. Si quiere los archivos de WOFF 2 de IcoMoon, tendr\u00e1 que pagar un solo pago de $9.00 para obtener acceso a su biblioteca premium.<\/p>\n Puede descargar manualmente, todos los iconos de Font Awesome que desee sin costo alguno, pero usted necesitar\u00eda utilizar una herramienta como FontForge<\/a> para editar manualmente su archivo WOFF o WOFF 2. Nos gusta simplificar las cosas, as\u00ed que utilizaremos un generador.<\/p>\n Vaya al generador de IcoMoon<\/a>. Nosotros le dimos clic en \u201cAdd\u201d en la biblioteca de Font Awesome.<\/p>\n Luego, usted querr\u00e1 elegir los iconos que quiera utilizar en su sitio de WordPress. Si ya est\u00e1 utilizando Font Awesome y se est\u00e1 simplemente pasando a versiones localmente alojadas, termine esto y haga una peque\u00f1a lista, luego el\u00edjalas de la biblioteca.<\/p>\n En este ejemplo, estaremos eligiendo iconos para perfmatters.io<\/a>, un sitio de ecommerce de WordPress, el cual utiliza Easy Digital Downloads.<\/p>\n Una vez que haya elegido todos sus iconos, elija \u201cGenerate Font\u201d que se encuentra en la parte de abajo. Para este sitio, terminamos utilizando 20 iconos.<\/p>\n Terminar\u00e1 con unos archivos que lucir\u00e1n as\u00ed. Los importantes que necesitar\u00e1 son el archivo Luego, se recomienda que lleve a cabo un find and replace (buscar y reemplazar) en el Para aquellos que ya se encuentren utilizando Font Awesome, simplemente, esto hace que sea m\u00e1s sencillo cambiar las cosas sobre las de Font Awesome, de esta forma, si ya hab\u00eda algo codificado en su sitio de WordPress usando este, autom\u00e1ticamente empezar\u00e1 a utilizar los iconos.<\/p>\n As\u00ed que utilice la parte de Find para encontrar \u201cicon\u201d y reempl\u00e1celo con todas las ocurrencias con \u201cfa\u201d. Podr\u00e1 hacer un find and replace r\u00e1pido con un editor de texto como Sublime<\/a>.<\/p>\n Esto reemplaza Tambi\u00e9n podr\u00eda necesitar cambiar la URL fuente, basada en donde subi\u00f3 sus archivos de fuente en el Paso 7. Nosotros recomendamos cambiar la URL a la de su CDN.<\/strong><\/p>\n Luego, necesita agregar el CSS a su sitio. Hay un par de formas de como puede hacer esto.<\/p>\n Opci\u00f3n 1<\/strong><\/p>\n Ya que la cantidad de CSS es muy peque\u00f1a, usted podr\u00eda copiar todos los archivos de CSS y pegarlos en el WordPress Customizer. Nunca haga esto para archivos grandes, pero esta es una relativamente peque\u00f1a cantidad de CSS. Esto quiere decir que cargar\u00e1 en l\u00ednea en su sitio.<\/p>\n Opci\u00f3n 2<\/strong><\/p>\n Usted podr\u00eda enlazarlo manualmente a su stylesheet al colocarlo en el encabezado de su sitio de WordPress. Sugerencia: Enl\u00e1celo a su propia CDN para tener un desempe\u00f1o m\u00e1s r\u00e1pido.<\/p>\n Opci\u00f3n 3<\/strong><\/p>\n Tambi\u00e9n podr\u00eda poner en fila el archivo CSS en WordPress. El proceso es muy similar a la forma manual. Agregue lo siguiente al archivo de Ahora que tiene el CSS agregado a su sitio, es tiempo de subir los archivos de fuentes. Puede poner las fuentes en cualquier lado, est\u00e1 bien meterlo a un folder llamado \u201cfonts\u201d en su \/public. Pero recuerde, el folder fuente en su archivo Ahora su sitio de WordPress deber\u00eda tener accesibles su CSS y archivos de fuente. As\u00ed que puede agregar una marca a su sitio. Esto tan s\u00f3lo es un ejemplo de como agregar un icono de un engrane.<\/p>\n Puede ver un ejemplo en vivo de esto funcionando en perfmatters.io<\/a>.\u00a0Tenga en mente de que puede utilizar cualquier elemento, no s\u00f3lo la La diferencia real es cuando uno da un vistazo a la diferencia de tama\u00f1o. Recuerde, cuando enlazamos a la biblioteca externa de Font Awesome, el tama\u00f1o total del archivo de la fuente era de 108 KB. Despu\u00e9s de utilizar un generador de fuente y s\u00f3lo elegir los iconos de Font Awesome que necesit\u00e1bamos para el sitio, redujo a 2.6 KB el tama\u00f1o del archivo de la fuente. \u00a1Nuestro archivo de fuente redujo en tama\u00f1o por un sorprendente 97.59%!<\/strong><\/p>\n Y no s\u00f3lo eso, sino que ahora carga desde nuestra CDN, lo que quiere decir que no habr\u00e1 b\u00fasquedas adicionales de DNS<\/strong> para fontawesome.com<\/p>\n\n Tambi\u00e9n puede usar este mismo enfoque con iconos SVG, que es un poco distinto.<\/p>\n Un aspecto negativo de icon fonts es su terrible accesibilidad<\/a>. Lectores de pantallas podr\u00edan salt\u00e1rselos, o peor a\u00fan, leer el unicode o el mismo car\u00e1cter. Esto resultar\u00eda en que la gente con deficiencia visual escuche \u201cfavoritos de yellow star\u201d cuando llegue al articulo de su men\u00fa de favoritos \u2013 no es ideal. Tambi\u00e9n debe tomar en cuenta qu\u00e9 sucede si las fuentes no cargan.<\/p>\n Idealmente, usted querr\u00e1 que iconos decorativos simplemente desaparezcan cuando no carguen y que los iconos cr\u00edticos sean reemplazados con texto si es que hay alg\u00fan problema.<\/p>\n El problema de accesibilidad es f\u00e1cil de resolver, simplemente utilice el par\u00e1metro y valor En una implementaci\u00f3n m\u00e1s completa, tambi\u00e9n puede utilizar Modernizr para probar el soporte de font face. Simplemente necesita modificar un poco el CSS, vea este excelente art\u00edculo de Bulletproof Font Icons<\/a> para obtener informaci\u00f3n m\u00e1s detallada.<\/p>\n Para obtener m\u00e1s informaci\u00f3n sobre como crear iconos cr\u00edticos con texto de respaldo, tambi\u00e9n le recomendamos leer el articulo de arriba, ellos han explicado y resuelto el problema de la mejor forma posible, pero el implementarlo se encuentra un poco fuera del alcance de este art\u00edculo.<\/p>\n Eso es todo con los icon fonts. Ahora ya tiene un par de formas distintas para obtener f\u00e1cilmente icon fonts en su sitio de WordPress, junto con la mejor forma de implementarlos cuando se trata de desempe\u00f1o.<\/p>\n![\"Iconos](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/iconos-de-font-awesome.png\")
\n
Las Formas M\u00e1s R\u00e1pidas y Sencillas para Utilizar Font Icons de WordPress<\/h2>\n
Opci\u00f3n 1 \u2013 Utilice el Plugin de WordPress<\/h3>\n
fa-3x<\/code> para hacerla 3 veces m\u00e1s grande.\u00a0<\/span><\/p>\n[fawesome iclass=\"fab fa-wordpress fa-3x\"]<\/code><\/pre>\n![\"Shortcode](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/shortcode-de-font-awesome-gutenberg.png\")
![\"Ejemplo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/font-awesome-wordpress-5-0.png\")
Opci\u00f3n 2 \u2013 Utilice los Dashicons Ya Incluidos<\/h3>\n
functions.php<\/code> o nosotros recomendamos utilizar un plugin gratuito como Code Snippets<\/a>. Esto minimiza el riesgo de romper su tema y los cambios tambi\u00e9n ser\u00e1n persistentes a lo largo de las actualizaciones de tema.<\/p>\nfunction my_theme_styles() {\nwp_enqueue_style( 'dashicons' );\n}<\/code><\/pre>\n<h2 class=\"dashicons-before dashicons-smiley\">My Cool Headline<\/h2><\/code><\/pre>\n![\"Dashicons](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/dashicons-gutenberg.png\")
![\"Ejemplo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/dashicons-wordpress.png\")
<h2 class=\"dashicons-before dashicons-smiley\">My Cool Headline<\/h2><\/code><\/pre>\nOpci\u00f3n 3 \u2013 Manualmente Enlazarlo a un Icon Fonts Alojado Externamente<\/h3>\n
<link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.5.0\/css\/all.css\" integrity=\"sha384-xxxxx\" crossorigin=\"anonymous\"><\/code><\/pre>\nHead<\/code>de cada plantilla o p\u00e1gina en su sitio de WordPress donde quiera utilizar Font Awesome. Puede editar el archivo de header.php<\/code> de su tema o mejor a\u00fan, seguir nuestro simple tutorial sobre c\u00f3mo agregar c\u00f3digo a su encabezado<\/a>.<\/p>\nbody<\/code>de su HTML. Encuentre el icono correcto<\/a> y aprenda c\u00f3mo agregarlo a su p\u00e1gina<\/a>.<\/p>\nProblemas de Desempe\u00f1o a Considerar al Usar Icon Fonts<\/h2>\n
Probablemente No Necesitar\u00e1 Todos Estos Iconos<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/gran-biblioteca-font-awesome.png\")
Cargar de una CDN Es Usualmente M\u00e1s R\u00e1pido<\/h3>\n
Alojar Icon Fonts Localmente (Solo los que Necesita)<\/h2>\n
Los B\u00e1sicos – \u00bfC\u00f3mo Funciona?<\/h3>\n
<link rel=\"stylesheet\" href=\"css\/font-awesome.min.css\"><\/code><\/pre>\n.fa <\/code>es definido (junto con algunos otros), y finalmente, cada icono con nombre es definido (por ejemplo: .fa-book).<\/p>\n..\/fonts <\/code>que ser\u00e1 el directorio de las fuentes, un folder arriba del actual archivo de CSS. Es probable que tenga que cambiar esto para que entre en su propia estructura de directorio.<\/p>\nPaso 1<\/h3>\n
Paso 2<\/h3>\n
![\"Biblioteca](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/biblioteca-icomoon-font-awesome.png\")
Paso 3<\/h3>\n
![\"Elija](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/elija-iconos-font-awesome.png\")
Paso 4<\/h3>\n
![\"Iconos](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/iconos-font-awesome-exportacion-icomoon.png\")
style.css<\/code>y los archivos de fuente (WOFF, WOFF 2).<\/p>\n![\"Archivos](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/archivos-de-font.png\")
Paso 5<\/h3>\n
style.css<\/code> antes de subirlo\/copiarlo a su sitio. As\u00ed es como luce el original.<\/p>\n![\"Archivo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/archivo-icomoon-css.png\")
![\"Find](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/find-replace-en-sublime.png\")
[class^=\"icon-\"], [class*=\" icon-\"]<\/code> with\u00a0[class^=\"fa-\"], [class*=\" fa-\"]<\/code>. Esto tambi\u00e9n arregla cada icono, as\u00ed que en lugar de empezar con .icon-<\/code>, ahora empieza con\u00a0.fa-<\/code>.<\/p>\nPaso 6<\/h3>\n
<link rel=\"stylesheet\" href=\"https:\/\/cdn.yourdomain.com\/fonts\/style.css\"><\/code><\/pre>\nfunctions.php<\/code> de su tema, o utilice el plugin gratuito de Code Snippets plugin<\/a>. A lo mejor necesite cambiar el directorio basado en el lugar donde lo haya subido.<\/p>\nfunction my_theme_styles() {\nwp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '\/css\/style.css' );\n}\n\nadd_action( 'wp_enqueue_scripts', 'my_theme_styles' );<\/code><\/pre>\nPaso 7<\/h3>\n
style.css<\/code>necesita coincidir.<\/p>\n![\"Archivos](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/archivos-icon-font-sftp.png\"){kind=icon}
Paso 8<\/h3>\n
<i class=\"fa fa-cog\"><\/i><\/code><\/pre>\ni<\/code> . Tambi\u00e9n puede utilizar elementos span<\/code>, todo esto adem\u00e1s de agregar el CSS a sus clases personalizadas.<\/p>\n![\"Ejemplo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/ejemplo-font-awesome-perfmatters.png\")
![\"Tama\u00f1o](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2015\/10\/tamano-del-archivo-woff2-font-awesome.png\")
Preocupaciones con la Accesibilidad de Icon Fonts<\/h2>\n
aria-hidden=\u201dtrue\u201d <\/code>para indicar a los lectores de pantalla que deber\u00edan descartar nuestro elemento.<\/p>\n<span class=\"icon icon-star\" aria-hidden=\"true\"><\/span> My Favourites<\/code><\/pre>\nResumen<\/h2>\n