Design Studio 1.2/1.3 – New Icons with minimal CSS and no uploading font files!

Building off a few techniques and observations I wrote about in 3 other posts, I now have what is an example of a single CSS file containing all the resources you need to illustrate how to use a font-based Icon pack, without having to upload various files after the fact.

The technical approaches can be found in these related posts, but I won’t go into detail here.:

Design Studio 1.2 – Embedding Bullet-proof Web Fonts

Design Studio 1.2/1.3 – SAP Fonts Usage for Icons

Design Studio 1.3 – Making Adhoc Analysis Template, Images, and CSS Work

Free font pack I chose:

Batch – 300+ Icons for Web & User Interface Design

The end result is a CSS file (attached) that contains the font files base-64 encoded directly into the .CSS file as a web font family ‘Batch’, along with one CSS class called .batch (and really, this is even optional, as it just specifies the encoded font family ‘Batch’.

/*
Batch Icons
by Adam Whitcroft
http://adamwhitcroft.com/batch/
Adapted for SAP BusinessObjects Design Studio
by Mike Howles
http://scn.sap.com/people/mike.howles4
*/
@font-face{
  font-family: 'Batch';
  src:
  url(data:application/octet-stream;base64,LONG BASE64 STRING REMOVED FOR BLOG POST) format('truetype'),
  url(data:application/vnd.ms-fontobject;base64,LONG BASE64 STRING REMOVED FOR BLOG POST) format('embedded-opentype');
  font-weight:normal;
    font-style:normal;
}
.batch {
  font-family : Batch;
  line-height : 1;
}

As you can see, not a lot of complexity here.  If you’ll notice, I’ve opted not to have a :before pseudo selector per-icon as there are hundreds of icons and that’s just too much CSS work.  So instead, I’ve created a BI Application that works as a handy copy and paste cheat sheet to be able to simply copy the desired Icon’s Unicode character and then paste it into your application if you use the Batch font.

Example screenshot below:

The Design Studio BI App (1.3 format) is attached (remove .txt extension and extract the .zip), which includes the complete CSS within it.  Everything you need to either use this as a starting point with the CSS and as an easy copy and paste reference cheat sheet of all the Unicode characters.

Again, the intent here was all about convenience.  One CSS file to keep up with, no font uploading needed, and an easy approach to add icons without a lot of CSS classes involved.  You could take a similar approach with the SAP Icons font family, but I wanted so additional variety and found this nice (and free) font pack.

Enjoy!