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

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 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

HTML for Icon Font Usage Where are we at right now in terms of the best markup for using icon fonts? Let's cover some options I think are currently the best. You want the icon to enhance a wordYou want the icon to stand alone but still be functional or informational And our major goals here are: As good of semantics as we can getAs little awkwardness for screen readers as possible This ground has been treaded before, but I think the following techniques are a small step forward. Enhancing a word Let's say we have a header like "Stats" and we want to set it apart from other headers on the page and emphasize it's meaning. <h2 id="stats" class="stats-title">Stats</h2> Result: So to get that icon in there (remember we're talking font icons here, we can't just pad the left and use a background) we'll need to insert some content. Using a pseudo element is tempting because 1) they aren't read by most screen readers 2) we don't need dedicated markup for the icon which is a semantic ideal. But alas! And the CSS is: Hey, it works

Where the best designers go to find photos and graphics This is my collection of the best websites to find free photos, icons and patterns. If you’d like to suggest a resource, send me an email. Photo Blogs Quality over quantity. Photo blogs are all about quality (not quantity). Wondering how to search all these blogs in one place? You might also be interested in Splashbox, a way to sync new photos with your Dropbox. Photo blogs like Unsplash are all about quality. Photo Search Engines Quantity over quality. Photo search engines such as Pixabay are all about quantity over quality. Icon Collections My favorite spot for icons is Icon Monstr. Otherwise, there are a number of other great icon spots that I hear about: Font Awesome, The Noun Project, Find Icons and Icon Sweets. Patterns I love Subtle Patterns. If you’re looking for patterns that are a little less subtle, you’ll want to check out The Pattern Library, which has 50 patterns available. Unusual but Awesome Tools Here’s a few awesome tools that are a bit unusual. Placeit is awesome.

Animating Along a Curved Path This demonstrates how to animate the position of an element along a curve. Click the button or drag the dots to see the animation. You can use this example as a tool to find the right XY values for start, end, and control points that will give you the right shape path for your own animation on a curve. The curved line shown here between points 0 and 3 is just for preview purposes, and is not part of animation on a curve. To see anim along a path, click the button above, or drag point 0, 1, 2, or 3. The X and Y of point 0 is [92,103] The X and Y of 1, 2, and 3, are the sub-arrays in array value of "curve:" in the anim.set() Setting up the HTML First we add some HTML to animate. <div class="example"><button id="btn-animate" class='yui3-button'>Animate On Path</button><div id="demo">A</div></div> Creating the Anim Instance Now we create an instance of Y.Anim, passing it a configuration object that includes the node we wish to animate. Changing Attributes Running the Animation Complete Example Source

Related: