diff --git a/.gitignore b/.gitignore index 2f47aa8..caf96cb 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ npm-debug.log dist .grunt styleguide/index.html +icon_font/svgs diff --git a/icon_font/README.md b/icon_font/README.md new file mode 100644 index 0000000..95234cf --- /dev/null +++ b/icon_font/README.md @@ -0,0 +1,29 @@ +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/font.sketch b/icon_font/font.sketch new file mode 100644 index 0000000..4794cbd Binary files /dev/null and b/icon_font/font.sketch differ diff --git a/icon_font/template.scss b/icon_font/template.scss new file mode 100644 index 0000000..325fb6f --- /dev/null +++ b/icon_font/template.scss @@ -0,0 +1,38 @@ + +// New dashboard icon font :) +// -------------------------------------------------- + +@font-face { + font-family: "CartoIcon"; + src: url("fonts/cartoIcon.eot"); + src: url("fonts/cartoIcon.eot?#iefix") format("embedded-opentype"), + url("fonts/cartoIcon.woff") format("woff"), + url("fonts/cartoIcon.ttf") format("truetype"), + url("fonts/cartoIcon.svg?ey3vsq#cartoIcon") format("svg"); + font-weight: normal; + font-style: normal; +} + +<% _.each(glyphs, function(glyph) { %> +<%= ' /* SG' %> +<%= '# Icon font/' + glyph.fileName.split("_")[2] %> +``` + iconFont--size24"> +``` +<%= '*/ ' %> +.iconFont-<%= glyph.fileName.split("_")[2] %>:before { + content: '\<%= glyph.codePoint %>'; +} +<% }); %> + + +.iconFont { + display: inline-block; + font-family: 'CartoIcon'; + font-style: normal; + font-weight: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: 1; +} + diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot new file mode 100644 index 0000000..9b84385 Binary files /dev/null and b/src/fonts/cartoIcon.eot differ diff --git a/src/fonts/cartoIcon.svg b/src/fonts/cartoIcon.svg new file mode 100644 index 0000000..dc79655 --- /dev/null +++ b/src/fonts/cartoIcon.svg @@ -0,0 +1,288 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf new file mode 100644 index 0000000..d5a4148 Binary files /dev/null and b/src/fonts/cartoIcon.ttf differ diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff new file mode 100644 index 0000000..f606afd Binary files /dev/null and b/src/fonts/cartoIcon.woff differ diff --git a/src/scss/icon-font.css.scss b/src/scss/icon-font.css.scss new file mode 100644 index 0000000..b521827 --- /dev/null +++ b/src/scss/icon-font.css.scss @@ -0,0 +1,947 @@ + +// New dashboard icon font :) +// -------------------------------------------------- + +@font-face { + font-family: "CartoIcon"; + src: url("fonts/cartoIcon.eot"); + src: url("fonts/cartoIcon.eot?#iefix") format("embedded-opentype"), + url("fonts/cartoIcon.woff") format("woff"), + url("fonts/cartoIcon.ttf") format("truetype"), + url("fonts/cartoIcon.svg?ey3vsq#cartoIcon") format("svg"); + font-weight: normal; + font-style: normal; +} + + + /* SG +# Icon font/Clock +``` + +``` +*/ +.iconFont-Clock:before { + content: '\E001'; +} + + /* SG +# Icon font/Stats +``` + +``` +*/ +.iconFont-Stats:before { + content: '\E002'; +} + + /* SG +# Icon font/Heart--empty +``` + +``` +*/ +.iconFont-Heart--empty:before { + content: '\E003'; +} + + /* SG +# Icon font/Heart--fill +``` + +``` +*/ +.iconFont-Heart--fill:before { + content: '\E004'; +} + + /* SG +# Icon font/Alert +``` + +``` +*/ +.iconFont-Alert:before { + content: '\E005'; +} + + /* SG +# Icon font/Rows +``` + +``` +*/ +.iconFont-Rows:before { + content: '\E006'; +} + + /* SG +# Icon font/Check +``` + +``` +*/ +.iconFont-Check:before { + content: '\E007'; +} + + /* SG +# Icon font/Dribbble +``` + +``` +*/ +.iconFont-Dribbble:before { + content: '\E008'; +} + + /* SG +# Icon font/Twitter +``` + +``` +*/ +.iconFont-Twitter:before { + content: '\E009'; +} + + /* SG +# Icon font/Wizard +``` + +``` +*/ +.iconFont-Wizard:before { + content: '\E00A'; +} + + /* SG +# Icon font/Info +``` + +``` +*/ +.iconFont-Info:before { + content: '\E00B'; +} + + /* SG +# Icon font/Fork +``` + +``` +*/ +.iconFont-Fork:before { + content: '\E00C'; +} + + /* SG +# Icon font/Facebook +``` + +``` +*/ +.iconFont-Facebook:before { + content: '\E00D'; +} + + /* SG +# Icon font/Folder +``` + +``` +*/ +.iconFont-Folder:before { + content: '\E00E'; +} + + /* SG +# Icon font/Dropbox +``` + +``` +*/ +.iconFont-Dropbox:before { + content: '\E00F'; +} + + /* SG +# Icon font/Cloud +``` + +``` +*/ +.iconFont-Cloud:before { + content: '\E010'; +} + + /* SG +# Icon font/Step +``` + +``` +*/ +.iconFont-Step:before { + content: '\E011'; +} + + /* SG +# Icon font/AddDocument +``` + +``` +*/ +.iconFont-AddDocument:before { + content: '\E012'; +} + + /* SG +# Icon font/ArrowNext +``` + +``` +*/ +.iconFont-ArrowNext:before { + content: '\E013'; +} + + /* SG +# Icon font/ArrowPrev +``` + +``` +*/ +.iconFont-ArrowPrev:before { + content: '\E014'; +} + + /* SG +# Icon font/Close +``` + +``` +*/ +.iconFont-Close:before { + content: '\E015'; +} + + /* SG +# Icon font/CartoFante +``` + +``` +*/ +.iconFont-CartoFante:before { + content: '\E016'; +} + + /* SG +# Icon font/Lock +``` + +``` +*/ +.iconFont-Lock:before { + content: '\E017'; +} + + /* SG +# Icon font/CartoDB +``` + +``` +*/ +.iconFont-CartoDB:before { + content: '\E018'; +} + + /* SG +# Icon font/Lens +``` + +``` +*/ +.iconFont-Lens:before { + content: '\E019'; +} + + /* SG +# Icon font/CloseLimits +``` + +``` +*/ +.iconFont-CloseLimits:before { + content: '\E01A'; +} + + /* SG +# Icon font/DefaultUser +``` + +``` +*/ +.iconFont-DefaultUser:before { + content: '\E01B'; +} + + /* SG +# Icon font/Cockroach +``` + +``` +*/ +.iconFont-Cockroach:before { + content: '\E01C'; +} + + /* SG +# Icon font/Floppy +``` + +``` +*/ +.iconFont-Floppy:before { + content: '\E01D'; +} + + /* SG +# Icon font/Trash +``` + +``` +*/ +.iconFont-Trash:before { + content: '\E01E'; +} + + /* SG +# Icon font/Wifi +``` + +``` +*/ +.iconFont-Wifi:before { + content: '\E01F'; +} + + /* SG +# Icon font/Unlock +``` + +``` +*/ +.iconFont-Unlock:before { + content: '\E020'; +} + + /* SG +# Icon font/Unlock--withEllipsis +``` + +``` +*/ +.iconFont-Unlock--withEllipsis:before { + content: '\E021'; +} + + /* SG +# Icon font/Gift +``` + +``` +*/ +.iconFont-Gift:before { + content: '\E022'; +} + + /* SG +# Icon font/People +``` + +``` +*/ +.iconFont-People:before { + content: '\E023'; +} + + /* SG +# Icon font/Play +``` + +``` +*/ +.iconFont-Play:before { + content: '\E024'; +} + + /* SG +# Icon font/Add +``` + +``` +*/ +.iconFont-Add:before { + content: '\E025'; +} + + /* SG +# Icon font/Map +``` + +``` +*/ +.iconFont-Map:before { + content: '\E026'; +} + + /* SG +# Icon font/Anchor +``` + +``` +*/ +.iconFont-Anchor:before { + content: '\E027'; +} + + /* SG +# Icon font/Key +``` + +``` +*/ +.iconFont-Key:before { + content: '\E028'; +} + + /* SG +# Icon font/Calendar +``` + +``` +*/ +.iconFont-Calendar:before { + content: '\E029'; +} + + /* SG +# Icon font/Document +``` + +``` +*/ +.iconFont-Document:before { + content: '\E02A'; +} + + /* SG +# Icon font/Eye +``` + +``` +*/ +.iconFont-Eye:before { + content: '\E02B'; +} + + /* SG +# Icon font/Marker +``` + +``` +*/ +.iconFont-Marker:before { + content: '\E02C'; +} + + /* SG +# Icon font/ProgressBar +``` + +``` +*/ +.iconFont-ProgressBar:before { + content: '\E02D'; +} + + /* SG +# Icon font/Book +``` + +``` +*/ +.iconFont-Book:before { + content: '\E02E'; +} + + /* SG +# Icon font/Notes +``` + +``` +*/ +.iconFont-Notes:before { + content: '\E02F'; +} + + /* SG +# Icon font/Rectangles +``` + +``` +*/ +.iconFont-Rectangles:before { + content: '\E030'; +} + + /* SG +# Icon font/Mountain +``` + +``` +*/ +.iconFont-Mountain:before { + content: '\E031'; +} + + /* SG +# Icon font/Points +``` + +``` +*/ +.iconFont-Points:before { + content: '\E032'; +} + + /* SG +# Icon font/Snake +``` + +``` +*/ +.iconFont-Snake:before { + content: '\E033'; +} + + /* SG +# Icon font/Boss +``` + +``` +*/ +.iconFont-Boss:before { + content: '\E034'; +} + + /* SG +# Icon font/Rocket +``` + +``` +*/ +.iconFont-Rocket:before { + content: '\E035'; +} + + /* SG +# Icon font/Barometer +``` + +``` +*/ +.iconFont-Barometer:before { + content: '\E036'; +} + + /* SG +# Icon font/Dollar +``` + +``` +*/ +.iconFont-Dollar:before { + content: '\E037'; +} + + /* SG +# Icon font/Email +``` + +``` +*/ +.iconFont-Email:before { + content: '\E038'; +} + + /* SG +# Icon font/Label +``` + +``` +*/ +.iconFont-Label:before { + content: '\E039'; +} + + /* SG +# Icon font/Outside +``` + +``` +*/ +.iconFont-Outside:before { + content: '\E03A'; +} + + /* SG +# Icon font/Jigsaw +``` + +``` +*/ +.iconFont-Jigsaw:before { + content: '\E03B'; +} + + /* SG +# Icon font/Tools +``` + +``` +*/ +.iconFont-Tools:before { + content: '\E03C'; +} + + /* SG +# Icon font/Question +``` + +``` +*/ +.iconFont-Question:before { + content: '\E03D'; +} + + /* SG +# Icon font/LayerStack +``` + +``` +*/ +.iconFont-LayerStack:before { + content: '\E03E'; +} + + /* SG +# Icon font/Alarm +``` + +``` +*/ +.iconFont-Alarm:before { + content: '\E03F'; +} + + /* SG +# Icon font/CloudDownArrow +``` + +``` +*/ +.iconFont-CloudDownArrow:before { + content: '\E040'; +} + + /* SG +# Icon font/Pencil +``` + +``` +*/ +.iconFont-Pencil:before { + content: '\E041'; +} + + /* SG +# Icon font/FountainPen +``` + +``` +*/ +.iconFont-FountainPen:before { + content: '\E042'; +} + + /* SG +# Icon font/EmptyDoc +``` + +``` +*/ +.iconFont-EmptyDoc:before { + content: '\E043'; +} + + /* SG +# Icon font/MergeArrow +``` + +``` +*/ +.iconFont-MergeArrow:before { + content: '\E044'; +} + + /* SG +# Icon font/MergeColumns +``` + +``` +*/ +.iconFont-MergeColumns:before { + content: '\E045'; +} + + /* SG +# Icon font/MergeSpatial +``` + +``` +*/ +.iconFont-MergeSpatial:before { + content: '\E046'; +} + + /* SG +# Icon font/Globe +``` + +``` +*/ +.iconFont-Globe:before { + content: '\E047'; +} + + /* SG +# Icon font/ChevronDown +``` + +``` +*/ +.iconFont-ChevronDown:before { + content: '\E048'; +} + + /* SG +# Icon font/Streets +``` + +``` +*/ +.iconFont-Streets:before { + content: '\E049'; +} + + /* SG +# Icon font/Keys +``` + +``` +*/ +.iconFont-Keys:before { + content: '\E04A'; +} + + /* SG +# Icon font/FacebookSquare +``` + +``` +*/ +.iconFont-FacebookSquare:before { + content: '\E04B'; +} + + /* SG +# Icon font/Fullscreen +``` + +``` +*/ +.iconFont-Fullscreen:before { + content: '\E04C'; +} + + /* SG +# Icon font/Rarrow +``` + +``` +*/ +.iconFont-Rarrow:before { + content: '\E04D'; +} + + /* SG +# Icon font/Share +``` + +``` +*/ +.iconFont-Share:before { + content: '\E04E'; +} + + /* SG +# Icon font/Linkedin +``` + +``` +*/ +.iconFont-Linkedin:before { + content: '\E04F'; +} + + /* SG +# Icon font/CalendarBlank +``` + +``` +*/ +.iconFont-CalendarBlank:before { + content: '\E050'; +} + + /* SG +# Icon font/CreativeCommons +``` + +``` +*/ +.iconFont-CreativeCommons:before { + content: '\E051'; +} + + /* SG +# Icon font/Bubble +``` + +``` +*/ +.iconFont-Bubble:before { + content: '\E052'; +} + + /* SG +# Icon font/Bars +``` + +``` +*/ +.iconFont-Bars:before { + content: '\E053'; +} + + /* SG +# Icon font/ArrowMenu +``` + +``` +*/ +.iconFont-ArrowMenu:before { + content: '\E054'; +} + + /* SG +# Icon font/TieFighter +``` + +``` +*/ +.iconFont-TieFighter:before { + content: '\E055'; +} + + /* SG +# Icon font/Ray +``` + +``` +*/ +.iconFont-Ray:before { + content: '\E056'; +} + + /* SG +# Icon font/Markup +``` + +``` +*/ +.iconFont-Markup:before { + content: '\E057'; +} + + /* SG +# Icon font/Table +``` + +``` +*/ +.iconFont-Table:before { + content: '\E058'; +} + + /* SG +# Icon font/Airlock +``` + +``` +*/ +.iconFont-Airlock:before { + content: '\E059'; +} + + /* SG +# Icon font/Pin +``` + +``` +*/ +.iconFont-Pin:before { + content: '\E05A'; +} + + /* SG +# Icon font/Attache +``` + +``` +*/ +.iconFont-Attache:before { + content: '\E05B'; +} + + /* SG +# Icon font/Download +``` + +``` +*/ +.iconFont-Download:before { + content: '\E05C'; +} + + + +.iconFont { + display: inline-block; + font-family: 'CartoIcon'; + font-style: normal; + font-weight: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: 1; +}