I want to customize the Magento admin with an stylish icon font (think Wingdings).

In most cases it's easy enough to do entirely via CSS with the :before pseudo-selector, outputting content: that is relevant and is styled with the aforementioned font.

But, in some cases, I don't just want to prepend an icon - I want the entire text to be in said font. My first thought is to do it via translation file:


"CMS","<span class='iconify'>CMS</span>"

So - while this may work - it feels like a hack and I'm concerned that the markup would be used in places I don't intend it to be. I'd really like some feedback on alternate methods of accomplishing this. Is there a better way?

  • Instead of changing the translation files, why not override the __() method? – Marius Jun 7 '13 at 16:12
  • I don't want to rewrite the entire translation method to examine for 2 or 3 strings that I want to mark up... – philwinkle Jun 7 '13 at 16:38
  • oh...I misunderstood... I thought you want to add this for most of the texts. – Marius Jun 7 '13 at 16:50
  • The only right way to do it is to add iconify class to the template. Alternatively you can write a JavaScript which will do it. – user487772 Jun 8 '13 at 11:49
  • If you're going to go the translation file route, make sure to leave easily found comments to let the next developer know what is going on. Aside from that, I would just change the templates directly. – pspahn Jun 13 '13 at 23:31

As no answers suggested something more elegant, the approach I took was to inject the tag markup via the translation file:

"CMS","<span class='iconify'>CMS</span>"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.