From d274b248e64c73e96360d8cdd4802a691e7962b3 Mon Sep 17 00:00:00 2001 From: xavijam Date: Mon, 18 Jan 2016 16:33:54 +0100 Subject: [PATCH] Moved icon font help to a new file --- Icon-Fonting.md | 28 ++++++++++++++++++++++++++++ README.md | 29 ----------------------------- 2 files changed, 28 insertions(+), 29 deletions(-) create mode 100644 Icon-Fonting.md diff --git a/Icon-Fonting.md b/Icon-Fonting.md new file mode 100644 index 0000000..a9b5be8 --- /dev/null +++ b/Icon-Fonting.md @@ -0,0 +1,28 @@ +How to make changes in the CartoDB icon font +-------------------------------------------- + +If you want to edit, add or remove any icon in our CartoDB font, you should follow these steps: + +- Check you have [Sketch](http://bohemiancoding.com/sketch/) last version. +- Open [font.sketch](http://github.com/CartoDB/CartoAssets/blob/master/icon-font/font.sketch) file and make your changes. + +### Rules for the 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 the 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](https://cloud.githubusercontent.com/assets/978461/5774986/93dc90e8-9d74-11e4-8064-a478e55d392b.png) + - 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](https://cloud.githubusercontent.com/assets/978461/5775004/acf10faa-9d74-11e4-893c-790da626d894.png) + +All done! diff --git a/README.md b/README.md index a9f40da..a1fe2b1 100644 --- a/README.md +++ b/README.md @@ -31,32 +31,3 @@ If you have these previous steps done: Just run this command: - ```grunt publish``` - -How to make changes in the CartoDB icon font --------------------------------------------- - -If you want to edit, add or remove any icon in our CartoDB font, you should follow these steps: - -- Check you have [Sketch](http://bohemiancoding.com/sketch/) last version. -- Open [font.sketch](http://github.com/CartoDB/CartoAssets/blob/master/icon-font/font.sketch) file and make your changes. - -### Rules for the 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 the 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](https://cloud.githubusercontent.com/assets/978461/5774986/93dc90e8-9d74-11e4-8064-a478e55d392b.png) - - 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](https://cloud.githubusercontent.com/assets/978461/5775004/acf10faa-9d74-11e4-893c-790da626d894.png) - -All done!