Quick Tip: Adding custom doctype icons to Umbraco 7

I wanted to share a quick tip with you all. As with most of the Umbraco sites I build I use custom icons for document types such as a newspaper icon for a news article and so on.

Umbraco 7 has a great selection of about 300 icons courtesy of Helveticons. This is more than enough for most people but I wanted to experiment and explore with the idea of adding my own custom icons to the dialog in Umbraco 7.

After quickly asking Per Ploug on how I could add icons to the list I got to work with creating a quick package to add over 2000+ icons which is way too many but was more of a experiment on performance to see how well Umbraco would cope and the answer is surprisingly fast in comparison to the 200 limit or so that Umbraco 6 and previous versions have.

So I give you Belle Icon Pack package that provides over 2000 icons from the webfont icon from WebHostingHub http://our.umbraco.org//projects/backoffice-extensions/belle-icon-pack

So now you have the package installer I will quickly share with you how it’s done, it’s painfully simple. Have a web icon font either by creating your own or using a library.

Create a folder called MyIcons in App_Plugins in this folder place your icon font files here and then create a CSS file in the same folder and ensure each icon in the font uses the CSS class prefix of .icon- but I recommend you prefix it with something unique ensuring it starts with .icon- still. So for example .icon-myfont- so you avoid any conflict withy the default Umbraco icon sets.

The final piece of the puzzle to get Umbraco to register this CSS file and pick up our icon font in the dialog is to create a package.manifest file which is a JSON file.

In this file I need to have the following

{
	"css": [
		"~/App_Plugins/MyIcons/Icons.css"
    ]
}

With all these parts in place we now have access to our custom fonts in the icon picker dialog for our data types in Umbraco.

Belle Icon Pack for Umbraco

I hope this helps some of you out there.

Cheers
Warren

Advertisements

6 thoughts on “Quick Tip: Adding custom doctype icons to Umbraco 7

    1. Hey Sebastian,
      I am not 100% clear what you are trying to achieve?

      So you want a custom modal that a user can select only your custom icons from, or the Umbraco ones & your custom ones?

      Or have I misunderstood?

      1. Sebastian, here would be a few useful links from the Umbraco Core Source Code

        https://github.com/umbraco/Umbraco-CMS/blob/7.2.0/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.html

        https://github.com/umbraco/Umbraco-CMS/blob/7.2.0/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.controller.js

        IconPicker Controller uses iconHelper as a service in this Angular Controller
        https://github.com/umbraco/Umbraco-CMS/blob/7.2.0/src/Umbraco.Web.UI.Client/src/common/services/iconhelper.service.js

        Or the simplest of them all use the dialogService to call iconPicker and from that dialog it will post back an object in the callback when its closed/selected an icon that your property editor can then consume & save in a property editor.

        https://github.com/umbraco/Umbraco-CMS/blob/7.2.0/src/Umbraco.Web.UI.Client/src/common/services/dialog.service.js#L459

        http://umbraco.github.io/Belle/#/api/umbraco.services.dialogService

        I hope this helps you out, Seb. If not more than happy to collab together to make this into a simple icon picker property editor if needed.

  1. Seems like it doesn’t work in Umbraco 7.1.8.

    The new icons is available when choosing the document-icon. But when you select one of the new icons. The choice of icon is not visible on the document-type and is not visible after save.

    There is no errors in the console.

    1. I am wondering if this issue has always been here. As the icon displays on the content tree when used, just not the document type editor page after selection. It seems like it never loads/applies to the item.

      However after digging some more & not finishing this comment. I have the problem. The edit document type is in a legacy iFramed page on the right which never loads in the whg.css. The main frame has the loaded whg.css but it never applies it to the IFramed content.

      I suppose the only workaround I can think of is to register whg.css with the Client Dependancy Framework as the iFramed page seems to be loading umbraco.css from CDF.

      Unfortunately if that does not work there is not much we can do until the Umbraco core teams drops the legacy iFramed pages.

      Cheers,
      Warren 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s