How to provide an icon for a dexterity type with Plone 5

Question

icon_expr is gone.

There is an related issue https://github.com/plone/Products.CMFPlone/issues/1236 concerning the problem but only for control-panel icons.

What is the appropriate way to add a icon to a dexterity content type in plone 5?

Any pointer welcome

Volker

Answer 1

Unluckily the Plone 5 way is only through CSS (with a background image for example) and register it in the new resource registry.

One way I tested is to re-use Fontello, like Barceloneta is doing but is not really simple because you must manually modify the generated CSS to prevent you new CSS to destroy other global rules. An example is here: https://github.com/RedTurtle/TurtledGazette/tree/master/Products/PloneGazette/browser/static (it's not even Dexterity or Archetypes, but this is not important).

Note. I don't really understand this run to CSS and iconfont. It's a kind of over-optimization:

• old school images can still be cached
• background images are not really accessible as real images provided also an "alt" for blind people, that warn about the content type.

I don't like current situation too much... it's OK while you are developing a theme but is a nightmare for add-ons developers.

Answer 2

Beneath the update of an actual fontello font, you can limit yourself to enhance the icon configuration.

From the Products.CMFPlone package you can get the current icon font config file "config.json"

/Products/CMFPlone/static/fonts/config.json

• To review the content of the file visually, go to the fontello.com website and visit the menu under the "wrench" icon.
• Reset all icon selections and settings you may have done before.
  • Unselect glyphs
  • Reset all changes
• Use Import to load the config.json file from CMFPlone.
• Review the icons, names, codes and shapes
• Look at the source code of config.json and locate icons not referencing a font but containing plain svg path information.

You will figure out that even glyphs can contain multiple path elements and holes as well.

Try to overload just the config.json file in your package by appending your custom icon as plain svg in the json and choose a non conflicting unicode char code. I am still working on documenting this in detail.

Source: I found a hint to this by Victor Fernandez de Alba mentioning this method in his talk [2] (see transscript [1]) during Plone Conf Bucharest:

1. http://maurits.vanrees.org/weblog/archive/2015/10/victor-fernandez-de-alba-plone-5-theming
2. http://www.slideshare.net/sneridagh/plone-5-theming-53980481 Slide 12