EPiServer 7.5 – List icons for blocks

OK, maybe this is obvious for everyone else, but it wasn’t to me. So this is part sharing and part to remember my self. 🙂

And for the record, this may not be the most correct way, but it’s the way i figured out.

What i wanted to do

What i wanted to do, was to make some fancy icons that shows up in the block listing. That means the listing that shows your created blocks.

Block icons

Since i had nice icons showing up when i create a new block, i really wanted this to work.

The easy part is to figure out you have to create a descriptor class. There’s tons of examples showing that. But most of them refers to internal css-classes, like epi-iconFacebook that grabs the icon from a sprite already existing in Epi UI. What if i want to make my own class and sprite?

Create a descriptor

The first thing i figured out was i had to create i descriptor class. Theese can be handy for a lot of things, but in this case there’s not much to it.

The only important thing here is epi-iconServicedesk which is the class name used to show the correct icon.  If you substitute that name with epi-iconFacebook you will instantly get a working icon for your block, the facebook icon.

Create sprite

You don’t have to create a sprite, it works fine with a 16×16 image of any supported format, but i needed a lot of icons so i made a sprite in a 16×16 grid.

Icon sprite

Create CSS

Using firebug it was easy to figure out how the existing classes were made. It’s all just a background. I saved my css classes in a separate file called blockicons.css.

Module.config

This is the part that wasn’t obvious at all for me. I didn’t really find any thing about this at all, but i did find a few articles on how to create a dojo widget. Theese got me in right direction.

In your websites root folder, create (or modify) the file module.config, and add your css file.

If i got this right, the name epi-cms.widgets.base make EpiServer load your client resources when it start itself. If you choose another name, it loads when needed by your home made dojo widget (which does not exist in this case).

Finishing up…

Compile your project and restart your web server. Go to your sites edit UI and you should end up seeing something like the first image in this post.

EPiServer really cache theese things well, so modifications to icons and css files may need a restart. So don’t get to upset if you make changes that doesn’t seem to apply.

7 thoughts on “EPiServer 7.5 – List icons for blocks

    1. I haven’t tried using woff fonts, but i can’t see why not. Everything possible in css should work. I would try something like this:

      @font-face {
      font-family: “myfont”;
      src: url(“fonts/myfont.woff”) format(‘woff’);
      }
      .Sleek .epi-icon {
      height: 16px;
      width: 16px;
      }
      .Sleek .epi-icon:before {
      font-face: myfont;
      content: “”; /* Whatever character matching desired icon */
      }

      Since i haven’t tried this, the code above could be useless.. But try and let me know if you solve it 🙂

  1. Believe it or not, but the method of the pageicons also works for the blocks…

    And ofcourse it would. Didnt think it thru…

    The method used there just needs to decorate your block classes with
    [ContentIcon(ContentIcons.IcoMoon.compass)] for example.

    No need to create a UIDescriptor for every block anymore.

    I think that method would benefit you as well..

Leave a Reply

Your email address will not be published. Required fields are marked *