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

View File

@ -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!

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!

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 %>';
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

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