background preloader

7 Gorgeous Icon Fonts for Web Designers

7 Gorgeous Icon Fonts for Web Designers
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.

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

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 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. 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. If your eyes haven’t glazed over yet there are more precise ways to calculate hyperfocal distance whether you use a point and shoot or an SLR. where H is hyperfocal distance

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.

Personal & Family Financial Planning - University of Florida | Coursera About the Course This course is activity-based with emphasis on your life as the basis for your work. In addition, you will learn how to apply the principles you learn in a family environment. We will learn about cash, credit, wealth, and risk management as well as the environmental effects on personal and family financial management. Students will earn badges for completing various modules and demonstrating certain skills. Course Syllabus Week 1 Understanding Personal Finance: Path to financial security and time value of money. Week 2 Financial Statements, Tools, and Budgets: Managing your flows and reviewing your statements. Week 3 Managing Income Taxes: Income tax basics. Week 4 Building and Maintaining Good Credit (Credit cards and consumer loans): Credit basics. Week 5 Managing Risk: Risk management basics and insurance overview. Week 6 Investment Fundamentals (Investing in stocks and bonds): Rules of investing; Debt and equity.

Free Icon Fonts for Web User Interfaces By Jacob Gube This roundup features 18 free icon fonts that can be used in your commercial projects. The icon fonts in this post are perfect for your app user interfaces (UIs). What are Icon Fonts? Icon fonts are font files that have symbols and glyphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters. Icon fonts are like dingbat fonts, but are designed specifically for UIs. And because they’re treated like web fonts, icon fonts: Have great cross-browser support (even IE6, for example, can render web fonts using the @font-face rule)Can be scaled on-the-fly if the user adjusts their web browser settingsCan be rendered with different colorsCan embody font- and text-related CSS properties (like text-shadow and gradient) See icon fonts in action by visiting my friend Chris Coyier’s icon fonts demo page. To learn how to use icon fonts, read this tutorial on CSS-Tricks: HTML for Icon Font Usage. Free Icon Fonts 1. Number of icons: 137. 2. Number of icons: 121. 3.

The Language and Tools of Financial Analysis - The University of Melbourne | Coursera About the Course This course is the first in the four-course Specialization Essentials of Corporate Financial Analysis and Decision-Making. In this course you will develop an understanding of the definitions of key accounting measures - but more importantly you will learn how accounting information is used on a daily basis in financial markets by analysts, investors and CFOs. Instructors from the University of Melbourne, together with their partners at BNY Mellon, bridge the gap between historical asset valuation reflected in financial statements and the forward-looking needs of market participants seeking to assess current value in the face of future uncertainty. Courses created in partnership with: Course Syllabus Module 1: An introduction to accounting principles: The language of capital markets Recommended Background Suggested Readings Texts which should be found on every finance professional’s shelf...Berk, J. & Demarzo, P. (2014) Corporate finance - the core (3rd ed.) Course Format

A roundup of great icon fonts Icon fonts are incredibly useful when designing a site, and have a huge number of advantages over regular icons. Because they are delivered as a font file and embedded like a font, these icons are easily scalable, their color can be altered live, rather than having to edit images; along with that, various effects can be added via coding, such as shadows, stroke effects, or gradients, making them far more versatile than images. Here, we will be rounding up some of the best icon fonts the world wide web has to offer, for you to use on your sites. Fico Fico is a fantastic looking font, presented on a beautiful site, which makes it a joy to download and use. The site clearly shows which letter or glyph is used for each icon, which removes the sometimes painful process of downloading an icon font only to find you have no idea where to find each icon on your keyboard, and spending precious time cycling through each key. Pixelated Entypo Uicons Iconic Sanscons Heydings Just Vector Flexi Social Icons ikoo

Related: