CartoAssets/icon_font
2016-01-17 22:21:44 +01:00
..
font.sketch Adds icon font 2016-01-17 22:21:44 +01:00
README.md Adds icon font 2016-01-17 22:21:44 +01:00
template.scss Adds icon font 2016-01-17 22:21:44 +01:00

How to make changes in the CartoDB icon font

If you want to edit, add or remove any icon in our new CartoDB font, you should follow these steps:

Rules for your new icons:

  • Size should have at max 500px of width/height.
  • Place the icon accordingly with the grid.
  • Icons should be completely black.
  • Group the icon if it has several parts.
  • Make icons exportable to SVG.
  • Name your icon (layer/group) according to the pattern icon-font_xx_Name, where xx is a unique integer (increase it for each new icon).

When you're done with changes

  • Select all icons, and export them to app/assets/fonts/icon_font/svgs folder (option should be visible in the bottom corner in your Sketch app):
    • screen shot 2015-01-16 at 11 40 36
    • Take into account that svgs folder is ignored.
  • Open your terminal app and go to the CartoDB root folder.
  • Install your node dependencies: npm install
  • Now we will generate the new icon fonts + stylesheet. Just run: ./node_modules/.bin/gulp
  • Check that your icon-font.css.scss and the cartoIcon fonts have been edited:
    • screen shot 2015-01-16 at 11 02 53

All done!