Skip to content

Add icons to the backend iconfont

Matthias Mees edited this page Oct 6, 2015 · 3 revisions

Note: If you don't feel comfortable adding or removing icons yourself, please contact @yellowled before making changes.

General hints

  • Please use Fontello
  • Please stick to the FontAwesome iconset, do not mix it with other iconsets.
  • Always start by importing the current iconfont selection (see first step below).
  • If you need to remove icons from the selection, make sure to replace them – with different or new icons – in the backend templates.
  • Please only add icons you definitely need in the backend, no “I might need this or that some day”. It's a performance issue.

How to add a new icon font build

  • Click the wrench icon in Fontello and import templates/2k11/admin/font/config.json.
  • Once you're done adding and/or removing icons, click “Download webfont”. Extract the downloaded zipfile and copy the following files to templates/2k11/admin/font/, replacing the current ones:
    • config.json
    • font/fontello.*
  • In templates/2k11/admin/style.css find /* ICON FONT. In the CSS segment right after that, replace the number in the url atrributes in that block with the number from css/fontello.css in your downloaded zip file.
  • In templates/2k11/admin/style.css find the block with all the icon declarations (.icon-home:before { content: '\e800'; } etc.) and replace that whole block with the contents of css/fontello-codes.css from your downloaded zip file. Please remove the comments at the end of each line.
  • Any time you save templates/2k11/admin/style.css, please make sure that it's ISO-8859-1.
  • Commit this seperately as “New icon font build”.
  • Add/edit the added/removed icons to/in the backend templates. Commit your changes seperately.