{"id":29853,"date":"2014-04-23T09:20:53","date_gmt":"2014-04-23T14:20:53","guid":{"rendered":"http:\/\/webirix.com\/?p=29853"},"modified":"2014-04-23T09:20:53","modified_gmt":"2014-04-23T14:20:53","slug":"convertir-iconos-a-fuente","status":"publish","type":"post","link":"https:\/\/webirix.com\/en\/convertir-iconos-a-fuente\/","title":{"rendered":"How to turn your icons into a font"},"content":{"rendered":"<h1 class=\"center post-title entry-title\" style=\"color: black; text-align: center;\" data-href=\"http:\/\/www.40defiebre.com\/como-convertir-iconos-fuente\/\">HOW TO TURN YOUR ICONS INTO A FONT<\/h1>\n<div class=\"centered post_excerpt\" style=\"font-style: italic; color: #444444;\">Surely you&#039;ve ever wanted a font to dominate them all (your icons), a modifiable and scalable font, but how do you create it?<\/div>\n<p>&nbsp;<\/p>\n<div class=\"center mb20\" style=\"color: #444444;\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/socialmood.com\/wp-content\/themes\/sm\/img\/sep.png\" alt=\"\" \/><\/div>\n<div class=\"hide-phone socialside\" style=\"color: #444444;\">\n<nav class=\"social-plain\">\n<h4 style=\"font-weight: bold; color: #444444;\">There are many reasons why converting your website icons into a single font is a very good idea.<\/h4>\n<\/nav>\n<\/div>\n<p style=\"color: #444444;\">One of them is that this is how we get\u00a0<strong>dramatically reduce weight<\/strong>, and therefore speed up the loading time of the web\u00a0<a style=\"color: blue;\" href=\"http:\/\/blog.pictonic.co\/post\/32260064131\/icon-fonts-could-speed-up-your-page-loading-time-by-14\" target=\"_blank\">up to 14%<\/a>\u00a0.<\/p>\n<p style=\"color: #444444;\">Another reason is the versatility it supposes when developing the web, since adding an icon is reduced to introducing a simple line of HTML and it also offers you\u00a0<strong>all the advantages of treating that icon as a font in CSS, being able to change the size or color at any time<\/strong>, without having to upload the images by FTP again and again.<\/p>\n<p style=\"color: #444444;\">And last, and perhaps the most important reason, why<strong>\u00a0simplicity when climbing<\/strong>\u00a0the icons, from a mobile screen to a 40-inch screen without losing resolution, since,\u00a0<strong>in short, we are talking about vectors<\/strong>\u00a0and not raster images as would be the case with a normal png.<\/p>\n<h3 style=\"font-weight: bold; color: #444444;\">How to start?<\/h3>\n<ul style=\"color: #444444;\">\n<li>The first thing you should do is create your icons in Illustrator, Sketch, Photoshop, or any other\u00a0<strong>vector editing program<\/strong>.<\/li>\n<li><strong>Make sure all strokes are expanded<\/strong>\u00a0(in Illustrator -&gt; Object&gt; Expand) and that there are no masks or effects. It should be a simple and clean traced object.<\/li>\n<li><strong>Export the icon as .SVG<\/strong>, a vector format.<\/li>\n<\/ul>\n<p style=\"color: #444444;\">\u00a0<a style=\"color: blue;\" href=\"http:\/\/iconvau.lt\/\" target=\"_blank\">Iconvau<\/a>\u00a0\u00a0allows us\u00a0<a style=\"color: blue;\" href=\"https:\/\/dl.dropboxusercontent.com\/u\/4982183\/Template.zip\" target=\"_blank\">download a template<\/a>\u00a0\u00a0to create our icons even easier.<\/p>\n<h3 style=\"font-weight: bold; color: #444444;\">How to convert them into a font?<\/h3>\n<p style=\"color: #444444;\"><strong>There are many free websites<\/strong>\u00a0that allow you to compile your .SVG icons into a single source format file. We recommend three:<\/p>\n<h4 style=\"font-weight: bold; color: black;\"><a style=\"color: black;\" href=\"http:\/\/iconvau.lt\/\" target=\"_blank\">Iconvau<\/a><\/h4>\n<p><a style=\"color: blue;\" href=\"http:\/\/iconvau.lt\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6227\" title=\"How to turn your icons into a font\" src=\"http:\/\/www.40defiebre.com\/wp-content\/uploads\/2014\/01\/iconvault.png\" alt=\"iconvault C\u00f3mo convertir tus iconos en una fuente\" width=\"675\" height=\"468\" \/><\/a><span style=\"color: #444444;\">\u00a0<\/span><\/p>\n<h4 style=\"font-weight: bold; color: black;\"><a style=\"color: black;\" href=\"http:\/\/fontello.com\/\" target=\"_blank\">Fontello<\/a><\/h4>\n<p><a style=\"color: blue;\" href=\"http:\/\/fontello.com\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6228\" title=\"How to turn your icons into a font\" src=\"http:\/\/www.40defiebre.com\/wp-content\/uploads\/2014\/01\/Fontello.png\" alt=\"Fontello C\u00f3mo convertir tus iconos en una fuente\" width=\"675\" height=\"468\" \/><\/a><span style=\"color: #444444;\">\u00a0<\/span><\/p>\n<h4 style=\"font-weight: bold; color: black;\"><a style=\"color: black;\" href=\"http:\/\/icomoon.io\/app\/#\/select\" target=\"_blank\">Icomoon<\/a><\/h4>\n<p><a style=\"color: blue;\" href=\"http:\/\/icomoon.io\/app\/#\/select\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6229\" title=\"How to turn your icons into a font\" src=\"http:\/\/www.40defiebre.com\/wp-content\/uploads\/2014\/01\/icomoon.png\" alt=\"icomoon C\u00f3mo convertir tus iconos en una fuente\" width=\"675\" height=\"468\" \/><\/a><span style=\"color: #444444;\">\u00a0<\/span><\/p>\n<p style=\"color: #444444;\">Basically all three do the same,\u00a0<strong>they let you upload your own icons, or choose from a catalog of your own free icons, and download the file with the sources<\/strong>\u00a0and all the necessary materials to install them on your website.<\/p>\n<p style=\"color: #444444;\">You can also use\u00a0<a style=\"color: blue;\" href=\"http:\/\/glifo.uiparade.com\/\" target=\"_blank\">Glyph<\/a>\u00a0, a Photoshop plugin that allows you to do the same as these websites:<\/p>\n<p><a style=\"color: blue;\" href=\"http:\/\/glifo.uiparade.com\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"How to turn your icons into a font\" src=\"http:\/\/www.40defiebre.com\/wp-content\/uploads\/2013\/12\/gif-1.gif\" alt=\"gif 1 C\u00f3mo convertir tus iconos en una fuente\" width=\"720\" height=\"416\" \/><\/a><span style=\"color: #444444;\">\u00a0<\/span><\/p>\n<h3 style=\"font-weight: bold; color: #444444;\">How to use the font?<\/h3>\n<p style=\"color: #444444;\">As simple as uploading the font by FTP to a folder on your website (we will guess that to \/ fonts) and adding the following code to your CSS file, similar to any other font:<\/p>\n<p style=\"color: #444444;\"><code style=\"color: #888888;\">@font-face {<br \/>\nfont-family: '40df';<br \/>\nsrc:url('fonts\/40df.eot');<br \/>\nsrc:url('fonts\/40df.eot?#iefix') format('embedded-opentype'),<br \/>\nurl('fonts\/40df.woff') format('woff'),<br \/>\nurl('fonts\/40df.ttf') format('truetype'),<br \/>\nurl('fonts\/40df.svg#icomoon') format('svg');<br \/>\nfont-weight: normal;<br \/>\nfont-style: normal;<br \/>\n}<\/code><\/p>\n<p style=\"color: #444444;\"><em>(Note: you must change the path and name of the files to yours)<\/em><\/p>\n<p style=\"color: #444444;\">Why are there different formats? Simply because of the incompatibilities of the browsers. If you notice the same .EOT file is even called twice, this is due to a problem with older versions of Internet Explorer. Finally, a .SVG file is included, to support iOS.\u00a0<strong>But do not worry, the user&#039;s browser will only download the first compatible format, so including the rest does not imply excess weight<\/strong>.<\/p>\n<p style=\"color: #444444;\"><strong>The next thing is to add the classes<\/strong>\u00a0to be able to call up the icons individually. In the CSS file we will include something similar to this:<\/p>\n<p style=\"color: #444444;\"><code style=\"color: #888888;\">.icon-twitter:before {<br \/>\ncontent: \"\\e000\";<br \/>\n}<br \/>\n.icon-facebook:before {<br \/>\ncontent: \"\\e001\";<br \/>\n}<br \/>\n.icon-dribbble:before {<br \/>\ncontent: \"\\e002\";<br \/>\n}<\/code><\/p>\n<p style=\"color: #444444;\">Don&#039;t worry, the file generated with any compiler that we have seen before will come with a css in which all these codes are included, so\u00a0<strong>you just have to copy them to the CSS of your website<\/strong>.<\/p>\n<p style=\"color: #444444;\">Calling your icons in HTML is as simple as adding on the page:<\/p>\n<p style=\"color: #444444;\"><code style=\"color: #888888;\">&lt;span class=&quot;icon-twitter&quot;&gt;&lt;\/span&gt; Twitter<\/code><\/p>\n<p style=\"color: #444444;\"><em>(Remember to include a space after closing the tag)<\/em><\/p>\n<p style=\"color: #444444;\">\u00a0You can use the &quot;span&quot; tag, or the &quot;i&quot; or &quot;em&quot; tag since they are inline tags and do not imply a line break.<\/p>\n<p style=\"color: #444444;\">Finally, in case you want to modify a specific icon, use CSS as you would with any normal font:<\/p>\n<p style=\"color: #444444;\"><code style=\"color: #888888;\">a .icon-twitter {<br \/>\ncolor: #41b7d8;<br \/>\n}<br \/>\na:hover .icon-twitter{<br \/>\ncolor: #005580;<br \/>\nsize: 40px;<br \/>\n}<\/code><\/p>\n<p style=\"color: #444444;\">These are the\u00a0<strong>Corporate colors<\/strong>\u00a0of the main social networks in case you want to use them in their corresponding icons:<\/p>\n<ul style=\"color: #444444;\">\n<li style=\"color: #41b7d8;\">Twitter: #41b7d8<\/li>\n<li style=\"color: #3b5997;\">Facebook: #3b5997<\/li>\n<li style=\"color: #d64937;\">Google: #d64937<\/li>\n<li style=\"color: #0073b2;\">LinkedIn: #0073b2<\/li>\n<li style=\"color: #388fc5;\">Vimeo: #388fc5<\/li>\n<li style=\"color: #ff0084;\">Flickr: #ff0084<\/li>\n<li style=\"color: #cb2027;\">Pinterest: #cb2027<\/li>\n<li style=\"color: #00aff0;\">Skype: #00aff0<\/li>\n<li style=\"color: #e0812a;\">RSS: #e0812a<\/li>\n<\/ul>\n<p style=\"color: #444444;\"><strong>And now you have it!<\/strong>\u00a0Now you can modify your icons much more easily than before and change their size without losing resolution.\u00a0<strong>All are advantages<\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>HOW TO TURN YOUR ICONS INTO A FONT Surely you&#039;ve ever wanted a font to dominate them all (your icons), a modifiable and scalable font, but how to create it? There are many reasons why converting your website icons into a single font is a very good idea. One of them is \u2026<\/p>","protected":false},"author":2,"featured_media":29854,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2011,2013],"tags":[],"class_list":["post-29853","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-actualidad","category-disenoweb"],"jetpack_featured_media_url":"https:\/\/webirix.com\/wp-content\/uploads\/2014\/04\/vector.png","_links":{"self":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/29853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/comments?post=29853"}],"version-history":[{"count":1,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/29853\/revisions"}],"predecessor-version":[{"id":29855,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/29853\/revisions\/29855"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media\/29854"}],"wp:attachment":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media?parent=29853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/categories?post=29853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/tags?post=29853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}