Sirius_B


Creative technologist with foodie tendencies. Life-long geek. Put-in-Bay native living in Cleveland. +3 boys and their amazing mother.

Font Icons for a Better Web UI

Font icons have emerged as the go to resource for simple resolution independent visual design elements. The obvious benefits over images which suffer from varying resolutions and sizes notwithstanding, there are so many to choose from, making it easier than ever to use them in web design and development.

Developing a visual language through iconography can give your project and its UI a depth of meaning and clarity that goes beyond written language and complex imagery or video. They can both support and inform touch points, areas of emphasis, and navigation. The following are some great resources for exploring a using iconography in your next project.

Font Icons Sets

The following sets are free or have a free set to use. You can download the font files and use them in your local projects and even clone many in GitHub and modify and extend them for your own purposes. Most tend to incorporate SVG with an @font-face fallback so they should work well in just about any scenario.

Iconic

Iconic’s open set is pretty robust, and an obvious play for you to purchase the more fully featured pro set. You can fork it on Github and it boasts a tiny footprint at 12.6K. Documentation is somewhat limited but includes usage as SVG as well as @font-face, including Bootstrap.

Font Awesome

One of the first and best open icon font set, Font Awesome is open and free and has more than 479 icons for web applications, file types, spinners, text editor, video player, and brands. They have great documentation to get started with incorporating these into your HTML/CSS, even offering a CDN hosted Bootstrap style sheet and plenty of examples to peruse and you can fork it on GitHub. If you use Omnigraffle for your UX work, they have a Font Awesome stencil that uses the actual font installed on your system.   

Foundation Fonts

If you use the excellent responsive framework Foundation from Zurb, you can grab their very own icon font from the playground. NOTE: They have a disclaimer that it hasn’t been tested with the latest version of the framework so YMMV.

Glyphicons Halflings

Like Foundation, Bootstrap has a default icon set that you can use right away. Not developed as part of the project like Foundation, the icon set is a free subset of Glyphicons called Glyphicon Halflings. If you use Bootstrap in your projects, this is the easiest way to get started, though Bootstrap has defaults that make using your preferred icon set pretty easy and as previously noted Font Awesome has their own Bootstrap CDN hosted style sheet.

Ionicons

Developed for use with the open source front end app development framework, Ionic, this font icon set is mimimalist and fairly comprehensive. There isn’t as much documentation as with some of the others but there is at least a cheatsheet, and you can also fork it on GitHub and they have a CDN for handy referencing.

Generators/Builders

Using a font icon generator has many advantages. You can use it to create very small font files/SVGs so that you don’t need to burden a user with downloading a font file with 300 characters, of which they will only need a handful to view your web app. The down side is that you may need your own CDN, which many of the icon fonts mentioned have.

Fontello

This font icon generator allows you to drag and drop custom icons you have crafted and mix-n-match them with several open-source font icons (including Font Awesome and Iconic) to create your own font that you can download. You can even customize class names and codes. There’s an API and you can fork it on Github.

IcoMoon

IcoMoon is a powerful font icon generator that allows you to mix and match from both free and paid icon libraries as well as from your own. You can manage multiple sets (called projects) from your account so you could have a different set for different clients, apps, or scenarios and you can tag these for easy searching. The app can be installed via the Chrome Store which can be used offline. The premium version has options for syncing changes to your font packages and font hosting.

Fontastic

Fontastic has a great interface and like IcoMoon and Fontello, it can import icon sets and has the most extensive set of predefined (both paid and free) options. You can also upload your own and modify your class and character mapping. You can create as many sets as you like but other than accessing them in a dropdown list, there isn’t much in the way of managing these. You can of course download your font or SVG sprite or alternatively use their Icon Cloud service which hosts the font files on an Amazon S3 server at 5,000 page views a month. With a premium account this is upgraded to the Amazon Cloudfront CDN and 1M views a month.

Collections

We Love Icon Fonts

Described as Google Web Fonts but for icon fonts only, We Love Icon Fonts is a source for free icon font sets. This is a great resource for exploring and finding icon fonts to fit your project. The authors caution that it is a public gamma, so it shouldn’t be used in production, but you can of course go straight to the source of the icon font. Or you can fork it on GitHub and create your own font hosting service.

Font-Forward

Please note, I did not include anything on stuff like The Noun Project, or Icon Finder which although very interesting, are not specifically icon font focused. Got any icon fonts of icon font resources that you use that I missed? Let me know in the comments. Happy iconography!

Sitecore Workflow XHTML Validation Issue - Solved

Sitecore has some handy and powerful validation capabilities. However, there is a validation rule that despite its good intent, will generally fail on newer websites.

If you use workflow in Sitecore and use the included Approve workflow step, it is setup to automatically validate for broken links and ensure that the content is correct XHTML. However, if you happen to be using HTML5 in your layout, say from HTML5 Boilerplate, this validation will fail. And there isn’t much you can do about it. The typical error message for the failed validation tends to look like this:

What to do? Well aside from changing your template markup, not much. While there may be “better” ways to solve this, the simplest solution is to just remove the validation rule. The trouble is, finding and removing the rules isn’t all that obvious - IMO. 

This can be found under Sitecore > System > Settings > Validation Rules > Global Rules. 

Select the “Global Rules” item and scroll down to the “Workflow” field. There you will find a rule in the right hand pane, called “Full Page XHtml” at the bottom of the list. Simply select this rule and remove it by pressing the left arrow button. 

Now save and publish the “Global Rules” item and the validation error will no longer be run upon clicking Approve. 

  

Adventures Beyond the Page Fold - Exploring UX Mythology

In this talk that I gave at StirTrek 2014, I discuss user experience myths that get in the way of good UX design. I address everything from the page fold, to 3 clicks from the home page, to faceted navigation and more!

I also kept the mic on for Q&A and took some questions from the audience.