Skip to Content
Author's profile photo Michael Howles

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
Adapted for SAP BusinessObjects Design Studio
by Mike Howles
  font-family: 'Batch';
  url(data:application/octet-stream;base64,LONG BASE64 STRING REMOVED FOR BLOG POST) format('truetype'),
  url(data:application/;base64,LONG BASE64 STRING REMOVED FOR BLOG POST) format('embedded-opentype');
.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.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Manna Das
      Manna Das

      This one is nice stuff, thanks for sharing

      Author's profile photo Former Member
      Former Member

      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


      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

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

      Author's profile photo Anshul Bhatt
      Anshul Bhatt

      Hi Michael,

      I got one batch.css file.

      that is the correct one....??


      Author's profile photo Michael Howles
      Michael Howles
      Blog 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.