{"id":1204,"date":"2020-03-30T13:27:16","date_gmt":"2020-03-30T12:27:16","guid":{"rendered":"http:\/\/www.webposible.com\/blog\/?p=1204"},"modified":"2020-03-03T13:37:53","modified_gmt":"2020-03-03T12:37:53","slug":"font-icons-accesibles","status":"publish","type":"post","link":"http:\/\/www.webposible.com\/blog\/2020\/font-icons-accesibles\/","title":{"rendered":"font icons accesibles"},"content":{"rendered":"<p>Tard\u00e9 en conocer los <span lang=\"en\">font-icons<\/span>, y m\u00e1s en utilizarlos. Ahora, en una especie de <span lang=\"en\">framework<\/span> que utilizo para trabajar, tambi\u00e9n he incluido <span lang=\"en\">font-icons<\/span>: una vieja versi\u00f3n de <a lang=\"en\" href=\"https:\/\/fontawesome.com\" hreflang=\"en\">Font Awesome<\/a> que sigue siendo \u00fatil.<\/p>\n<p>\u00bfQu\u00e9 es un <span lang=\"en\">font-icon<\/span>? Es una forma de mostrar im\u00e1genes usando ficheros de fuentes, lo que ocurre es que en lugar de tener por ejemplo la letra \u00aba\u00bb tiene el icono \u00ablupa\u00bb.<\/p>\n<p>\u00bfQu\u00e9 <strong>ventajas<\/strong> tiene?<\/p>\n<ul>\n<li>Poder cambiar el tama\u00f1o y color mediante <abbr title=\"Cascading Style Sheet\" lang=\"en\">CSS<\/abbr><\/li>\n<li>Tener un conjunto homog\u00e9neo de iconos<\/li>\n<li>Uso relativamente sencillo<\/li>\n<\/ul>\n<p>\u00bfQu\u00e9 <strong>desventajas<\/strong> tiene? Aqu\u00ed van algunas:<\/p>\n<ul>\n<li>En ocasiones es necesario configurar el servidor para que sirva los ficheros de fuentes de la forma adecuada (<span lang=\"en\">mimetype<\/span>)<\/li>\n<li>No siempre hay un equilibrio entre los iconos disponibles y los que realmente se utilizan (y eso penaliza los tiempos de carga)<\/li>\n<li>Para que sea compatible con un amplio espectro de navegadores, suelen ser necesarios varios ficheros con diferentes formatos de fuentes (y tambi\u00e9n penaliza los tiempos de carga).<\/li>\n<li>No siempre se tienen en cuenta un aspecto clave, la accesibilidad.<\/li>\n<\/ul>\n<h2>\u00bfC\u00f3mo hace un <span lang=\"en\">font-icon<\/span> accesible?<\/h2>\n<p>Hay dos posibles casos de uso: iconos decorativos, e iconos importantes.<br \/>\nY tenemos dos tipos de t\u00e9cnicas para hacerlos accesibles: usando HTML y usando <abbr title=\"Accessible Rich Internet Applications\">WAI-ARIA<\/abbr>.<\/p>\n<p>Veamos, usando como ejemplo la versi\u00f3n actual de Font Awesome (5.10.2).<\/p>\n<p>Una vez tenemos disponible las fuentes de iconos, mediante un c\u00f3digo similar a:<br \/>\n<code>&lt;i class=\"fas fa-star\"&gt;&lt;\/i&gt;<\/code><\/p>\n<p>En el caso de que sea una imagen decorativa, usando el cl\u00e1sico HTML no har\u00eda falta nada m\u00e1s, pero con <abbr title=\"Accessible Rich Internet Applications\">WAI-ARIA<\/abbr> podemos a\u00f1adir la propiedad <code>aria-hidden<\/code> para que lo oculte.<br \/>\n<code>&lt;i class=\"fas fa-star\" aria-hidden&gt;&lt;\/i&gt;<\/code><\/p>\n<p>En el caso de que se utilice un icono de fuente como si fuera una imagen y como tal necesite una alternativa textual, usando el viejo HTML nos bastar\u00eda con a\u00f1adir un t\u00edtulo descriptivo <code>title<\/code>.<br \/>\nPero si aprovechamos las cracter\u00edsticas de <abbr title=\"Accessible Rich Internet Applications\">WAI-ARIA<\/abbr> podr\u00edamos usar <code>role=\"img\"<\/code> para indicar que es una imagen, y <code>aria-label<\/code> para a\u00f1adir esa alternativa textual necesaria.<\/p>\n<p>El <strong>resultado final<\/strong> ser\u00eda:<\/p>\n<p><code>&lt;i class=\"fas fa-star\" role=\"img\" aria-label=\"Favorito\" title=\"Favorito\"&gt;&lt;\/i&gt;<\/code><\/p>\n<h2>Optimizar los <span lang=\"en\">font-icons<\/span> y usar s\u00f3lo los iconos que necesito<\/h2>\n<p>Una recomendaci\u00f3n final: como en cualquier <em>utilidad<\/em>, toca valorar si lo que nos ofrece es lo que necesitamos y cu\u00e1nto nos cuesta para ver si merece o no la pena.<\/p>\n<p>En el caso de los <span lang=\"en\">font-icons<\/span>, tenemos por ejemplo, la posibilidad de usar centenares de iconos. \u00bfNecesitamos tantos?\u00bfQu\u00e9 coste tiene en velocidad de carga?<\/p>\n<p>Si no necesitamos 400 iconos, solamente queremos 4, \u00bfpara qu\u00e9 queremos tanto? Al final vamos a conseguir que la p\u00e1gina se cargue m\u00e1s tarde y nos penaliza demasiado.<\/p>\n<p>Para esos casos, nada como usar <a href=\"http:\/\/fontello.com\/\" lang=\"en\" hreflang=\"en\">fontello<\/a> que nos permite <strong>seleccionar para nuestro proyecto s\u00f3lo los iconos que vamos a utilizar realmente<\/strong>. Y aunque no nos ofrezca la versatilidad de otras alternativas, puede ser justo lo que necesitamos.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tard\u00e9 en conocer los font-icons, y m\u00e1s en utilizarlos. Ahora, en una especie de framework que utilizo para trabajar, tambi\u00e9n he incluido font-icons: una vieja versi\u00f3n de Font Awesome que sigue siendo \u00fatil. \u00bfQu\u00e9 es un font-icon? Es una forma de mostrar im\u00e1genes usando ficheros de fuentes, lo que ocurre es que en lugar de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1204","post","type-post","status-publish","format-standard","hentry","category-accesibilidad"],"_links":{"self":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/1204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/comments?post=1204"}],"version-history":[{"count":1,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/1204\/revisions"}],"predecessor-version":[{"id":1205,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/1204\/revisions\/1205"}],"wp:attachment":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/media?parent=1204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/categories?post=1204"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/tags?post=1204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}