Adds instructions to generate the icon font in the README

This commit is contained in:
Javier Arce
2016-01-17 23:58:52 +01:00
parent 864474bc05
commit b73cdb1d5c
7 changed files with 122 additions and 31 deletions
-29
View File
@@ -1,29 +0,0 @@
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:
- Check you have [Sketch](http://bohemiancoding.com/sketch/) last version.
- Open [font.sketch](http://github.com/CartoDB/cartodb/blob/master/app/assets/fonts/icon_font/font.sketch) file and make your changes
### 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](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!
+1 -1
View File
@@ -18,7 +18,6 @@
-moz-osx-font-smoothing: grayscale;
line-height: 1;
}
<% _.each(glyphs, function(glyph) { %>
<%= '/* SG' %>
<%= '# Icon font/' + glyph.fileName.split("_")[2] %>
@@ -26,6 +25,7 @@
<i class="iconFont iconFont-<%= glyph.fileName.split("_")[2] %> iconFont--size24"></i>
```
<%= '*/' %>
.iconFont-<%= glyph.fileName.split("_")[2] %>::before {
content: '\<%= glyph.codePoint %>';
}