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.
I hope this helps some of you out there.
Cheers
Warren
Thanks Warren, this was extremely useful! And worked like a charm.
LikeLike
Hey Warren. Any ideas on how to get the same functionality, but as a property with a custom datatype ?
LikeLike
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?
LikeLike
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.
LikeLike
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.
LikeLike
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 🙂
LikeLike