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:

/wp-content/uploads/2014/06/cheatsheet_472288.png

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!

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Sebastian Elbin

    Thanks michael for your nice blog.

    I have try to download and extract the .zip file like described. But I only get a file that looks like this:

    try to extract.JPG

    I have also try to convert the .txt file to a .css file but with the same result.

    Where is my mistake?

    Regards and nice weekend

    Sebastian

    (0) 
    1. Mike Howles Post author

      The attachment to the blog post is a .ZIP file, with another .ZIP with a .txt inside of it.  Extract the BATCH_CHEAT_SHEET.zip.txt and remove the .txt from that one, and unzip it again.  Sorry for the confusion!

      (0) 
    1. Mike Howles Post author

      Yes that is the .CSS file. The folder containing that file and a few others can be added to your Design Studio workspace as an app as a working example.

      (0) 

Leave a Reply