diff --git a/README.md b/README.md index 4912a51..1bc1e31 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,6 @@ > Share frontend assets between different CartoDB repositories - ### Installation As easy as: - ```npm install``` @@ -29,3 +28,32 @@ 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! diff --git a/icon_font/README.md b/icon_font/README.md index 95234cf..e69de29 100644 --- a/icon_font/README.md +++ b/icon_font/README.md @@ -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! diff --git a/icon_font/template.jst.ejs b/icon_font/template.jst.ejs index 93b229d..0487622 100644 --- a/icon_font/template.jst.ejs +++ b/icon_font/template.jst.ejs @@ -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 @@ iconFont--size24"> ``` <%= '*/' %> + .iconFont-<%= glyph.fileName.split("_")[2] %>::before { content: '\<%= glyph.codePoint %>'; } diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index a255e32..2320fc0 100644 Binary files a/src/fonts/cartoIcon.eot and b/src/fonts/cartoIcon.eot differ diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index b4a62dd..6b855b5 100644 Binary files a/src/fonts/cartoIcon.ttf and b/src/fonts/cartoIcon.ttf differ diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index ba6fd66..4f0483b 100644 Binary files a/src/fonts/cartoIcon.woff and b/src/fonts/cartoIcon.woff differ diff --git a/src/scss/icon-font.css.scss b/src/scss/icon-font.css.scss index 205549b..c571503 100644 --- a/src/scss/icon-font.css.scss +++ b/src/scss/icon-font.css.scss @@ -25,6 +25,7 @@ ``` */ + .iconFont-Clock::before { content: '\E001'; } @@ -35,6 +36,7 @@ ``` */ + .iconFont-Stats::before { content: '\E002'; } @@ -45,6 +47,7 @@ ``` */ + .iconFont-Heart--empty::before { content: '\E003'; } @@ -55,6 +58,7 @@ ``` */ + .iconFont-Heart--fill::before { content: '\E004'; } @@ -65,6 +69,7 @@ ``` */ + .iconFont-Alert::before { content: '\E005'; } @@ -75,6 +80,7 @@ ``` */ + .iconFont-Rows::before { content: '\E006'; } @@ -85,6 +91,7 @@ ``` */ + .iconFont-Check::before { content: '\E007'; } @@ -95,6 +102,7 @@ ``` */ + .iconFont-Dribbble::before { content: '\E008'; } @@ -105,6 +113,7 @@ ``` */ + .iconFont-Twitter::before { content: '\E009'; } @@ -115,6 +124,7 @@ ``` */ + .iconFont-Wizard::before { content: '\E00A'; } @@ -125,6 +135,7 @@ ``` */ + .iconFont-Info::before { content: '\E00B'; } @@ -135,6 +146,7 @@ ``` */ + .iconFont-Fork::before { content: '\E00C'; } @@ -145,6 +157,7 @@ ``` */ + .iconFont-Facebook::before { content: '\E00D'; } @@ -155,6 +168,7 @@ ``` */ + .iconFont-Folder::before { content: '\E00E'; } @@ -165,6 +179,7 @@ ``` */ + .iconFont-Dropbox::before { content: '\E00F'; } @@ -175,6 +190,7 @@ ``` */ + .iconFont-Cloud::before { content: '\E010'; } @@ -185,6 +201,7 @@ ``` */ + .iconFont-Step::before { content: '\E011'; } @@ -195,6 +212,7 @@ ``` */ + .iconFont-AddDocument::before { content: '\E012'; } @@ -205,6 +223,7 @@ ``` */ + .iconFont-ArrowNext::before { content: '\E013'; } @@ -215,6 +234,7 @@ ``` */ + .iconFont-ArrowPrev::before { content: '\E014'; } @@ -225,6 +245,7 @@ ``` */ + .iconFont-Close::before { content: '\E015'; } @@ -235,6 +256,7 @@ ``` */ + .iconFont-CartoFante::before { content: '\E016'; } @@ -245,6 +267,7 @@ ``` */ + .iconFont-Lock::before { content: '\E017'; } @@ -255,6 +278,7 @@ ``` */ + .iconFont-CartoDB::before { content: '\E018'; } @@ -265,6 +289,7 @@ ``` */ + .iconFont-Lens::before { content: '\E019'; } @@ -275,6 +300,7 @@ ``` */ + .iconFont-CloseLimits::before { content: '\E01A'; } @@ -285,6 +311,7 @@ ``` */ + .iconFont-DefaultUser::before { content: '\E01B'; } @@ -295,6 +322,7 @@ ``` */ + .iconFont-Cockroach::before { content: '\E01C'; } @@ -305,6 +333,7 @@ ``` */ + .iconFont-Floppy::before { content: '\E01D'; } @@ -315,6 +344,7 @@ ``` */ + .iconFont-Trash::before { content: '\E01E'; } @@ -325,6 +355,7 @@ ``` */ + .iconFont-Wifi::before { content: '\E01F'; } @@ -335,6 +366,7 @@ ``` */ + .iconFont-Unlock::before { content: '\E020'; } @@ -345,6 +377,7 @@ ``` */ + .iconFont-Unlock--withEllipsis::before { content: '\E021'; } @@ -355,6 +388,7 @@ ``` */ + .iconFont-Gift::before { content: '\E022'; } @@ -365,6 +399,7 @@ ``` */ + .iconFont-People::before { content: '\E023'; } @@ -375,6 +410,7 @@ ``` */ + .iconFont-Play::before { content: '\E024'; } @@ -385,6 +421,7 @@ ``` */ + .iconFont-Add::before { content: '\E025'; } @@ -395,6 +432,7 @@ ``` */ + .iconFont-Map::before { content: '\E026'; } @@ -405,6 +443,7 @@ ``` */ + .iconFont-Anchor::before { content: '\E027'; } @@ -415,6 +454,7 @@ ``` */ + .iconFont-Key::before { content: '\E028'; } @@ -425,6 +465,7 @@ ``` */ + .iconFont-Calendar::before { content: '\E029'; } @@ -435,6 +476,7 @@ ``` */ + .iconFont-Document::before { content: '\E02A'; } @@ -445,6 +487,7 @@ ``` */ + .iconFont-Eye::before { content: '\E02B'; } @@ -455,6 +498,7 @@ ``` */ + .iconFont-Marker::before { content: '\E02C'; } @@ -465,6 +509,7 @@ ``` */ + .iconFont-ProgressBar::before { content: '\E02D'; } @@ -475,6 +520,7 @@ ``` */ + .iconFont-Book::before { content: '\E02E'; } @@ -485,6 +531,7 @@ ``` */ + .iconFont-Notes::before { content: '\E02F'; } @@ -495,6 +542,7 @@ ``` */ + .iconFont-Rectangles::before { content: '\E030'; } @@ -505,6 +553,7 @@ ``` */ + .iconFont-Mountain::before { content: '\E031'; } @@ -515,6 +564,7 @@ ``` */ + .iconFont-Points::before { content: '\E032'; } @@ -525,6 +575,7 @@ ``` */ + .iconFont-Snake::before { content: '\E033'; } @@ -535,6 +586,7 @@ ``` */ + .iconFont-Boss::before { content: '\E034'; } @@ -545,6 +597,7 @@ ``` */ + .iconFont-Rocket::before { content: '\E035'; } @@ -555,6 +608,7 @@ ``` */ + .iconFont-Barometer::before { content: '\E036'; } @@ -565,6 +619,7 @@ ``` */ + .iconFont-Dollar::before { content: '\E037'; } @@ -575,6 +630,7 @@ ``` */ + .iconFont-Email::before { content: '\E038'; } @@ -585,6 +641,7 @@ ``` */ + .iconFont-Label::before { content: '\E039'; } @@ -595,6 +652,7 @@ ``` */ + .iconFont-Outside::before { content: '\E03A'; } @@ -605,6 +663,7 @@ ``` */ + .iconFont-Jigsaw::before { content: '\E03B'; } @@ -615,6 +674,7 @@ ``` */ + .iconFont-Tools::before { content: '\E03C'; } @@ -625,6 +685,7 @@ ``` */ + .iconFont-Question::before { content: '\E03D'; } @@ -635,6 +696,7 @@ ``` */ + .iconFont-LayerStack::before { content: '\E03E'; } @@ -645,6 +707,7 @@ ``` */ + .iconFont-Alarm::before { content: '\E03F'; } @@ -655,6 +718,7 @@ ``` */ + .iconFont-CloudDownArrow::before { content: '\E040'; } @@ -665,6 +729,7 @@ ``` */ + .iconFont-Pencil::before { content: '\E041'; } @@ -675,6 +740,7 @@ ``` */ + .iconFont-FountainPen::before { content: '\E042'; } @@ -685,6 +751,7 @@ ``` */ + .iconFont-EmptyDoc::before { content: '\E043'; } @@ -695,6 +762,7 @@ ``` */ + .iconFont-MergeArrow::before { content: '\E044'; } @@ -705,6 +773,7 @@ ``` */ + .iconFont-MergeColumns::before { content: '\E045'; } @@ -715,6 +784,7 @@ ``` */ + .iconFont-MergeSpatial::before { content: '\E046'; } @@ -725,6 +795,7 @@ ``` */ + .iconFont-Globe::before { content: '\E047'; } @@ -735,6 +806,7 @@ ``` */ + .iconFont-ChevronDown::before { content: '\E048'; } @@ -745,6 +817,7 @@ ``` */ + .iconFont-Streets::before { content: '\E049'; } @@ -755,6 +828,7 @@ ``` */ + .iconFont-Keys::before { content: '\E04A'; } @@ -765,6 +839,7 @@ ``` */ + .iconFont-FacebookSquare::before { content: '\E04B'; } @@ -775,6 +850,7 @@ ``` */ + .iconFont-Fullscreen::before { content: '\E04C'; } @@ -785,6 +861,7 @@ ``` */ + .iconFont-Rarrow::before { content: '\E04D'; } @@ -795,6 +872,7 @@ ``` */ + .iconFont-Share::before { content: '\E04E'; } @@ -805,6 +883,7 @@ ``` */ + .iconFont-Linkedin::before { content: '\E04F'; } @@ -815,6 +894,7 @@ ``` */ + .iconFont-CalendarBlank::before { content: '\E050'; } @@ -825,6 +905,7 @@ ``` */ + .iconFont-CreativeCommons::before { content: '\E051'; } @@ -835,6 +916,7 @@ ``` */ + .iconFont-Bubble::before { content: '\E052'; } @@ -845,6 +927,7 @@ ``` */ + .iconFont-Bars::before { content: '\E053'; } @@ -855,6 +938,7 @@ ``` */ + .iconFont-ArrowMenu::before { content: '\E054'; } @@ -865,6 +949,7 @@ ``` */ + .iconFont-TieFighter::before { content: '\E055'; } @@ -875,6 +960,7 @@ ``` */ + .iconFont-Ray::before { content: '\E056'; } @@ -885,6 +971,7 @@ ``` */ + .iconFont-Markup::before { content: '\E057'; } @@ -895,6 +982,7 @@ ``` */ + .iconFont-Table::before { content: '\E058'; } @@ -905,6 +993,7 @@ ``` */ + .iconFont-Airlock::before { content: '\E059'; } @@ -915,6 +1004,7 @@ ``` */ + .iconFont-Pin::before { content: '\E05A'; } @@ -925,6 +1015,7 @@ ``` */ + .iconFont-Attache::before { content: '\E05B'; } @@ -935,6 +1026,7 @@ ``` */ + .iconFont-Download::before { content: '\E05C'; }