background preloader

7 Gorgeous icon fonts to speed up your site and your design process

7 Gorgeous icon fonts to speed up your site and your design process
TNW first covered the growing popularity of icon fonts back in January, and since then the Web has practically exploded with impressive icon fonts for use in Web design. For those that are out of the loop, you can think of an icon font as a grown-up version of dingbats…with an actual use-case. The core idea is to take a set of icons or pictograms that would normally be implemented as an image or vector file and then convert it into a font. There are many reasons to do this too, according to Pictonic, as an icon font can load as much as 14% faster than images and can to be as much as 90% smaller than SVG files. Now that a ton of options have emerged as popular choices among Web designers, we’ve made this brief list of 7 typefaces to point you in the right direction. Font Awesome (free) Font Awesome is an icon font that was designed to work perfectly with Twitter Bootstrap. Fontello (free) Modern Pictograms (free) Typicons (free) Yet another set of well-made, clean icons for Webfont use. Related:  outils et ressourcesUX

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! All layouts use valid markup and CSS, and have been tested successfully on Internet Explorer/win 5.0, 5.5, 6 and beta 2 preview of version 7; Opera 8.5, Firefox 1.5 and Safari 2. Each of the columns could be the longest, and for testing columns length I've used the script filler text on demand. Each layout could represent a site with five main sections: header, content, navigation, other stuff and footer. The basic markup, common to every layout, is the following: <div id="container"> <div id="header">Header</div> <div id="wrapper"> <div id="content">Content</div> </div> <div id="navigation">Navigation</div> <div id="extra">Extra stuff</div> <div id="footer">Footer</div> </div> It's almost minimal, apart from an extra wrapper around the content. Talking about CSS: each of the layouts uses float and in most of the cases negative margins.

❍ Docs IcoMoon is an icon solution, providing three main services: Vector Icon Packs, The IcoMoon App, and hosting icons as SVGs or fonts. Read further to learn about each service in detail. Besides an open source icon pack (view it on github), IcoMoon also offers two main premium icon sets: Linearicons, which is a line icon set; and Ultimate/Essential packs which are suitable for all kinds of projects. Head over to using a modern web browser to start using the IcoMoon app. This app is also available in the Chrome Web Store (runs offline). Selecting Icons You can simply click on an icon cell to select or deselect it. Note: By selecting only the icons that you actually need, you can keep the size of your fonts down. Editing Icons To edit an icon, use the edit/pencil button and then click on an icon cell. Pro Tip: Instead of pressing the pencil button, you could hold down the option/alt key and then click an icon cell to bring up the edit panel. Importing your own vectors Sketch

Circle, instagram icon By Neil Hainsworth View designer profile SVG - Base64 PNG - Base64 Help License: Free for commercial use (help for licenses) Additional sizes Free Social Icons - 143 vector (SVG) icons View all icons in icon set 17 comments SVG PNG AI CSH More Please wait SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More View all icons in icon set Related icons SVG PNG AI More SVG PNG AI CSH More SVG PNG AI More Premium SVG PNG AI More SVG PNG AI CSH More SVG PNG AI CSH More PNG More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI More SVG PNG AI More SVG PNG AI CSH More SVG PNG AI CSH More SVG PNG AI CSH More Sponsors

The Making of Octicons The Most Comprehensive Index Of Free Icon Fonts/Iconic Web Fonts - Functionn Updated: 15 March 2014 | Legend: * recommended , * new Index: BBC GEL Icons, Brandico, Ding Dongs, Ding Maps, Dingbests, Dot Com, Elusive Icons, Erler Dingbats, Evilz, Font Awesome, Foundation Icon Fonts 2 , GeoBats, Glyphyx, Grands, Guifx v2 Transports, Handy Icons, Hazard, Heydings Icons, IcoMoon, Iconic, ikoo Typo, JustVector, Ligature Symbols, Listicons, Meteocons, Modern Pictograms, Mun, Notice, OpenWeb Icons, Peculiar, Pictogramz, Pictonic, PulsarJS, Raphaël Icon Set, Santiago Icono, Signify Lite , Siruca Pictograms, Socialico, Sosa, StateFace, Symbly Lite, Symbolix, Sym­bol Signs, The Entypo Pictogram Suite, Travelcons, Typicons, Web Symbols Typeface, Zocial BBC GEL Icons – Free Iconic Web Font The BBC Global Experience Language (GEL) is a set of icons from the BBC which was originally designed to complement their website by supplying a new set of icons to provide a visual guide to navigation. Brandico – Free Iconic Web Font Ding Dongs – Free Iconic Web Font

YSlow for Safari Icons DB - free custom icons Sweet16sitesforcollegestudents.pdf 20 @fontface Icon Sets The pros for using @fontface icon sets far outweigh the cons. First of all, there are the obvious benefits of being infinitely scalable and being able to style them dynamically using any CSS property (color, gradients, shadow…). Secondly, its much easier to manage one single font file as opposed to juggling lots of individual images or having to create sprites. Thirdly, a single font file will only need a single HTTP Request for all the icons you use. And finally, just to round things off and finally convince you of the benefits of using @fontface icons, they look amazing. As @fontface icons are a relatively new trend that is slowly moving into the mainstream, there are very few icon-sets that are available in a font format. Modern Pictograms Number of Icons/Characters: 89 Price: Free License: Open Font License → Download Page: Modern Pictograms → Web Symbols Typeface Number of Icons/Characters: 77 Price: Free License: SIL Open Font License (OFL) → Download Page: Web Symbols Typeface → Fico

A Pocket Guide to Master Every Day’s Typographic Adventures Carte de France cliquable en SVG avec la librairie js Raphaël Je vous propose de faire une carte cliquable des régions françaises (hors Dom Tom), le but ici est d’avoir une carte compatible avec les anciens navigateur (oui même notre ami IE) et sur un maximum de terminaux, donc adieu flash (Flash n’étant pas supporté sur les ipad, iphone et Android). On va donc se concentrer sur le format SVG (wikipédia) et surtout pour assurer la compatibilité avec les anciens navigateurs on va utiliser la librairie JS Raphael. Voici les étapes * Volontairement je ne m’étendrais pas sur la création du fichier SVG, mais sachez qu’avec un logiciel de dessin vectoriel comme inkscape, en sélectionnant un objet (les contours des départements par exemple) et en faisant Ctrl+ Maj + X (Editeur XML) la première ligne « d » correspond aux coordonnées dont nous avons besoin. Voilà vous avez téléchargé les fichiers, nous allons créer une simple page web nommée index.html, et un répertoire « js » pour nos fichiers javascript. Créer notre page web : <! Sources :

Icon Fonts are Awesome Because you can easily change the size Because you can easily change the color Because you can easily shadow their shape Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs. Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever. You'll be able to do things like add strokes to them with text-stroke or add gradients/textures with background-clip: text; once browser support is a bit deeper. The icon font used on this page is Fico by Lennart Schoors then ran through IcoMoon for custom mappings. How To Use To Enhance a Word Stats <h3><span aria-hidden="true" data-icon="&#x21dd;"></span> Stats </h3> How To Use for Stand Alone Icons

The Secret to Ultra-Sharp Photos The following post on The Secrets to Ultra-Sharp Photos is by San Francisco based photographer Jim M. Goldstein. Learn more about him at the end of this post. As previously noted the best photo tip I ever received had to do with sharpness and up until the time in which I received this tip I had little understanding of how to consistently get sharp photos. I’ll never forget when I was a teenager I borrowed my mothers film SLR and ventured out into Yosemite valley while on a family vacation to photograph flowers, the landscape, etc. Whether you’re using film or digital cameras the optics of lenses hasn’t changed as optics are all about math and physics. “When the lens is focused on the hyperfocal distance, the depth of field extends from half the hyperfocal distance to infinity.” – Photography, Phil Davis, 1972. The short and sweet tip for those using shorter focal length lenses is to focus 1/3 of the way into your photo with a smaller aperture setting to maximize your depth of field. where

Related: