May need to convert to SVGs instead, see:

do you know the state of this jira?

Fleshing out the previous solution some more:

• by default the edit icon appears immediately to the right of the editable text field.

• edit mode can be activated by selecting the icon or by selecting the text field.

• the edit icon by default dims when edit field is activated

• hovering over the edit icon will produce an outline

Using CSS, the user will be able to:

• position the edit icon to where ever they want

• modify dim style or hide the icon all together when edit mode is activated

There is a problem with the pencil icon. Currently the icon is in the editable field which appears and disappears when editing / viewing. However, any text within the field will become part of the editable text - including the icon font.

One possible way to fix this is to put the icon in a span after the editable field and allow the integrator ability to position as they please via CSS.

Attached font with pencil, undo, redo, and save.
Icons generated from the AI file attached to this JIRA:
http://issues.fluidproject.org/browse/FLUID-3801