Using custom icons for plone.app.toolbar?

Plone Support Add-on Development
1

This is a followup to a former question:

I have various content-types with custom actions defined as

  <action title="Dropbox" action_id="dropbox" category="object" condition_expr=""
    url_expr="string:${object_url}/authorize-dropbox" visible="True">
    <permission value="Modify portal content" />
  </action>

I know that I can use something like

.icon-dropbox-before {content: ...}

refer to some character of the Fontello font.

But how do you deal with icons that are not part of the Fontello font as shipped with Plone. In this case I want the Dropbox icon from the Fontello font...how to include it? Or is the general recommentation to use dedicated SVGs here?

2

The problem with Fontello is, its not a font as usal.It calls itself a "Icons font generator" and it's meant to create a custom font for each use. Maybe because as one big font it would be to large. So one picks out the icons needed and creates in fact a custom font to be used in the site. This was done for Plone too. So on download a name can be choosen for this custom font.

In Plone a major mistake happened: Instead of plone-fontello-icons or such a name, the font was just named fontello.

Also another mistake happened: In CSS all icons in toolbar or similar places, where other addons can hook in, are considered to come from this one fontello font.

So yes, the current situation is bad and I guess - whoever did this - the person did not understand how fontello works and its consequences for addons.

This need to be fixed, but this is difficult w/o breaking current addons.

1 Like
3

I find it easier to generate a new font instead of updating Plone's fontello. Something like this:

Alternatively you could use your favorite image type (preferrably, an SVG/SVG sprite) in a background-image/no-repeat and position it with similar styles.

4

So basically you ship with your own icon font and leave fontello alone?
What tool are you using for adding/managing new icons on your font?

5

yes, that was the conclusion of this:

6

@zopyx We use svg for all our icons and actually need to override all of Plone's default ones anyways.

@jensens It'd be easy enough to fix. Also, if you provide your own override font, the browser won't load both.

7

Creating a font for every package appears over the top. I need exactly one icon for the toolbar for every add-on...this is not approachable and maintainable...guess SVGs are the way to go...everything else is too complicated (as too many other things in Plone 5).

-aj

8

Yes.

We used Fontello.com to generate our font in this project. If you have more than one content-type it hurts less :slight_smile: Also see: How to provide an icon for a dexterity type with Plone 5 - Stack Overflow

9

As you can also read from the comments of Volker: the road taken here for icons is broken and not approachable. There is no way to justify some hours of work to a customer just for adding/changing an icon...technical perhaps a clean solution, for real world usage: over-designed, too many steps, error-prone and therefore unusable.

-aj

10

It should not take hours to change an icon.

The point is that icons are done with css. CSS icons have been done for many years in web development. You can achieve this with css through font icons, svg icons or plain image icons. You can reference actual files or better yet, inline them with base64. Font icons are nice because their color can be changed with css; however, again, you do not need to use them.

This is not much different than Plone 4 which used image sprites and css for content type icons.

11

@vangheem How have you handled coloring SVG icons in every possible scenario in Plone?

12

Well, after replacing all default content type icons with SVG, it does not look so bad to only have two colors of SVG: white for the toolbar and black for the rest.