{"id":109,"date":"2015-05-13T06:36:53","date_gmt":"2015-05-13T11:36:53","guid":{"rendered":"http:\/\/wjharil.com\/blog\/?p=109"},"modified":"2017-10-20T15:19:46","modified_gmt":"2017-10-20T20:19:46","slug":"como-usar-font-awesome","status":"publish","type":"post","link":"https:\/\/wjharil.com\/blog\/como-usar-font-awesome\/","title":{"rendered":"C\u00f3mo usar los iconos de Font Awesome"},"content":{"rendered":"<p>Muchos de nosotros nos hemos topado con alguna p\u00e1gina web que usen los<strong> iconos de Font Awesome<\/strong>, ya que ahora est\u00e1 siendo muy usado por los maquetadores (adem\u00e1s de dise\u00f1adores) como recurso. Hoy, vamos a ver <strong>c\u00f3mo implementarlo en nuestro sitio web<\/strong>.<\/p>\n<h2>\u00bfQu\u00e9 es Font Awesome?<\/h2>\n<p>Para comenzar, tenemos que definir y saber que <strong>Font Awesome es una fuente de iconos<\/strong> que nos facilita \u00e9stos en vez de utilizar im\u00e1genes, lo que mejora mucho la carga de la web al evitar hacer la c\u00e1rga.<\/p>\n<p>Ya sabiendo \u00e9sto, debemos agregar que lo que usa es: una hoja de estilos (.css) y su tipograf\u00eda.<\/p>\n<h2>\u00bfC\u00f3mo usar Font Awesome<\/h2>\n<p>Con unos sencillos pasos, ya podremos tener agregado la lista de iconos en nuestra p\u00e1gina web:<\/p>\n<ul>\n<li><a title=\"Descargar Font Awesome\" href=\"http:\/\/fontawesome.io\/\" target=\"_blank\">Descargar Font Awesome<\/a> (o tambi\u00e9n podemos usar su CDN).<\/li>\n<li>Una vez descargado los archivos, tenemos que agregar dentro de nuestra etiqueta &lt;head&gt; la siguiente l\u00ednea:\n<pre class=\"lang:xhtml decode:true \">&lt;link href=\"css\/font-awesome.min.css\" rel=\"stylesheet\"\/&gt;<\/pre>\n<p>en caso usemos las CDN, ya no descargamos nada y ponemos directamente la l\u00ednea :<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;link href=\"\/\/netdna.bootstrapcdn.com\/font-awesome\/4.0.3\/css\/font-awesome.css\" rel=\"stylesheet\"\/&gt;<\/pre>\n<\/li>\n<li>Luego de ello, estar\u00e1 listo para ser usado. Un sencillo ejemplo:<\/li>\n<li>\n<pre class=\"lang:xhtml decode:true\">&lt;i class='fa fa-facebook'&gt;&lt;\/i&gt;<\/pre>\n<\/li>\n<li>\u00c9so nos devolver\u00e1 el <strong>icono de Facebook<\/strong>.<\/li>\n<\/ul>\n<p>Como hemos visto, es sencillo <strong>agregar a nuestro sitio web Font Awesome<\/strong>. Para ver la lista de todos los iconos disponibles, podemos entrar a <a title=\"Iconos de font awesome\" href=\"http:\/\/fontawesome.io\/icons\/\" target=\"_blank\">\u00e9ste enlace<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Muchos de nosotros nos hemos topado con alguna p\u00e1gina web que usen los iconos de<br \/><a class=\"moretag\" href=\"https:\/\/wjharil.com\/blog\/como-usar-font-awesome\/\">Continuar Leyendo...<\/a>","protected":false},"author":1,"featured_media":110,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":["font awesome"],"featured_image_src":"https:\/\/wjharil.com\/blog\/wp-content\/uploads\/2015\/05\/font-awesome-como-usar.png","categorias":["Facebook","Fuera de tema","Recursos","Tutoriales"],"_links":{"self":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/109"}],"collection":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/comments?post=109"}],"version-history":[{"count":5,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/109\/revisions"}],"predecessor-version":[{"id":166,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/109\/revisions\/166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/media\/110"}],"wp:attachment":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/media?parent=109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/categories?post=109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/tags?post=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}