{"id":128,"date":"2013-07-13T19:05:25","date_gmt":"2013-07-13T19:05:25","guid":{"rendered":"http:\/\/maquetando.com\/?p=128"},"modified":"2013-07-19T23:31:04","modified_gmt":"2013-07-19T23:31:04","slug":"usando-iconos-sin-imagenes-con-font-awesome","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/usando-iconos-sin-imagenes-con-font-awesome\/","title":{"rendered":"Usando iconos sin im\u00e1genes con Font Awesome"},"content":{"rendered":"<p><a href=\"http:\/\/fortawesome.github.com\/Font-Awesome\/#integration\" target=\"_blank\">Font Awesome<\/a> es una fuente \u00a0que podemos usar para implementar \u00a0 iconos sin necesidad de im\u00e1genes \u00a0y sin t\u00e9cnicas intrusivas.<\/p>\n<p>La mayor\u00eda de iconos que podemos usar con\u00a0<a href=\"http:\/\/fortawesome.github.com\/Font-Awesome\/#integration\" target=\"_blank\">Font Awesome<\/a>\u00a0\u00a0est\u00e1n relacionados a acciones que regularmente llevamos a cabo \u00a0en sitios o aplicaciones web por lo que es ideal para implementar en este tipo de proyetos .<\/p>\n<p>Dentro de sus caracter\u00edsticas se encuentran :<\/p>\n<ul>\n<li>F\u00e1cil implementaci\u00f3n con CSS, no necesitamos JavaScript y podemos modificar propiedades como color , tama\u00f1o , sombra etc.<\/li>\n<li>SVG \u00a0significa cada icono se ve impresionante en cualquier tama\u00f1o.<\/li>\n<li>Soporte para IE7 sin necesidad de hacks<\/li>\n<li>Soporte para retina display , \u00a0lo que significa que son magn\u00edficos en pantallas de alta resoluci\u00f3n.<\/li>\n<li>Est\u00e1 pensado para trabajar correctamente con Twitter Bootstrap 2 \u00a0pero tambien se puede usar de forma<\/li>\n<li>Es gratis! Puedes incluirlo en tus proyectos.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Instrucciones para implementarlo sin bootstrap :<\/p>\n<ol>\n<li>Descargamos los archivos\u00a0 del <a href=\"http:\/\/fortawesome.github.com\/Font-Awesome\/#integration\" target=\"_blank\">sitio web oficial<\/a>.<\/li>\n<li>Copiamos el contenido de la carpeta \u00a0\/font y los archivos de la carpeta \/css a un directorio de nuestro sitio.<\/li>\n<li>Modificamos la ruta donde se encuentra la fuente font-awesome:<\/li>\n<\/ol>\n<pre class=\"lang:css decode:true\">@font-face {\r\n  font-family: 'FontAwesome';\r\n  src: url('..\/font\/fontawesome-webfont.eot?v=3.0.1');\r\n  src: url('..\/font\/fontawesome-webfont.eot?#iefix&amp;v=3.0.1') format('embedded-opentype'),\r\n    url('..\/font\/fontawesome-webfont.woff?v=3v=3.0.1') format('woff'),\r\n    url('..\/font\/fontawesome-webfont.ttf?v=3.0.1') format('truetype');\r\n  font-weight: normal;\r\n  font-style: normal;<\/pre>\n<p>4.-Enlazamos dentro de la etiqueta &lt;head&gt; los archivos font-awesome.min.css y\u00a0font-awesome-ie7.min.css ( solo para iE)<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;link rel=\"stylesheet\" href=\"css\/font-awesome.min.css\"&gt;\r\n&lt;!--[if IE 7]&gt;\r\n&lt;link rel=\"stylesheet\" href=\"css\/font-awesome-ie7.min.css\"&gt;\r\n&lt;![endif]--&gt;<\/pre>\n<p>5.- Aplicamos \u00a0un \u00a0estilo a nuestro elemento html con el icono que deseemos mostrar :<\/p>\n<pre class=\"lang:css decode:true\">&lt;span class=\"icon-facebook\"&gt;&lt;\/span&gt;<\/pre>\n<div>\n<ol>\n<li value=\"6\">Listo debemos ver un icono con la famosa \u00bb \u00bb de facebook \u00a0, aqu\u00ed esta la <a href=\"http:\/\/fortawesome.github.com\/Font-Awesome\/#icons-new\" target=\"_blank\">lista completa de iconos<\/a> y su respectivo estilo.<\/li>\n<\/ol>\n<p>En la documentaci\u00f3n nos indican \u00a0otras formas de implementarlo<a href=\"http:\/\/fortawesome.github.com\/Font-Awesome\/#integration\" target=\"_blank\"> como por ejemplo usando .less<\/a> para bootstrap.<\/p>\n<p><a href=\"http:\/\/fortawesome.github.com\/Font-Awesome\/#\" target=\"_blank\">Font-awesome<\/a> ya viene con algunos estilos \u00a0css predefinidos para modificar el tama\u00f1o , pero tambien se puede modificar mediante la propiedad font-size como lo hacemos regularmente en elemento de texto.<\/p>\n<p>Es de gran ayuda para cualquier proyecto web.<\/p>\n<\/div>\n<div>Enlace :\u00a0<a href=\"http:\/\/fortawesome.github.com\/Font-Awesome\/\" target=\"_blank\">Font Awesome<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Font Awesome es una fuente \u00a0que podemos usar para implementar \u00a0 iconos sin necesidad de&hellip;<\/p>\n","protected":false},"author":1,"featured_media":368,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[23],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/128"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=128"}],"version-history":[{"count":4,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/128\/revisions"}],"predecessor-version":[{"id":369,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/128\/revisions\/369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media\/368"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}