{"id":21820308,"url":"https://github.com/trademe/trademe-iconfont","last_synced_at":"2025-03-21T10:46:30.161Z","repository":{"id":148328205,"uuid":"86642768","full_name":"TradeMe/TradeMe-IconFont","owner":"TradeMe","description":"Trade Me Classic iconfont","archived":false,"fork":false,"pushed_at":"2018-03-26T20:36:44.000Z","size":19083,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-26T07:24:09.534Z","etag":null,"topics":["iconfont"],"latest_commit_sha":null,"homepage":"http://trademe.co.nz","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TradeMe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-30T00:48:37.000Z","updated_at":"2022-02-16T01:31:44.000Z","dependencies_parsed_at":"2023-05-19T19:45:35.142Z","dependency_job_id":null,"html_url":"https://github.com/TradeMe/TradeMe-IconFont","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TradeMe%2FTradeMe-IconFont","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TradeMe%2FTradeMe-IconFont/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TradeMe%2FTradeMe-IconFont/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TradeMe%2FTradeMe-IconFont/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TradeMe","download_url":"https://codeload.github.com/TradeMe/TradeMe-IconFont/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244782641,"owners_count":20509860,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["iconfont"],"created_at":"2024-11-27T16:31:15.456Z","updated_at":"2025-03-21T10:46:30.141Z","avatar_url":"https://github.com/TradeMe.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TradeMe-IconFont\n[![Build Status](https://travis-ci.com/TradeMe/TradeMe-IconFont.svg?token=17pppDNTC2zxqDVwZYTf\u0026branch=master)](https://travis-ci.com/TradeMe/TradeMe-IconFont)\n\nWorkflow for creating the iconfont for Trade Me 2015 style icons used in **Classic** [Trade Me](http://trademe.co.nz/)\n\n[Iconfont demo](https://trademe.github.io/TradeMe-IconFont/)\n\n### v1.3.1\n* Full icon set including historic Classic and 2015\n\n### v1.2.1\n* Direct build from Sketch file\n\n### v1.1.2\n* Continuous integration and release with Travis CI\n\n### v1.1.0\n* Local build workflow for iconfont\n* Updated with full 2015 icon set\n\n### v11-deprecated\n* Font made with [Fontastic](http://fontastic.me/)\n\nFull release notes with new icons and updates can be found in [Releases](http://github.com/TradeMe/TradeMe-IconFont/releases)\n\n## Creating icon release\n### For designers\n\nClone repo\n```sh\ngit clone https://github.com/TradeMe/TradeMe-IconFont.git\ncd TradeMe-IconFont\n```\nEdit Sketch file in [`src/sketch/TradeMe.TradeMe.Icons.sketch`](src/sketch/TradeMe.TradeMe.Icons.sketch)\n\nCommit changes, and tag with new version following [Semver](http://semver.io/).\n\n```sh\ngit add src/sketch/TradeMe.TradeMe.Icons.sketch\ngit commit -m \"your changes to iconset\"\ngit tag v1.2.x\ngit push origin --tags\n```\n\nThis tag will trigger Travis CI to deploy a new release.\n\n## Installation\n\n```sh\nbrew update\nbrew install ttfautohint fontforge --with-python\nnpm install\n```\n* `fontforge` is only required for Sketch toolkit font ligatures\n* Can use `Node` for production\n\n### XQuartz\nInstall [XQuartz](http://xquartz.macosforge.org/)\n\nJust the first time, start XQuartz from `Applications/Utilities/XQuartz.app`, go to the X11 menu, Preferences, Input, and **turn off** the `Enable keyboard shortcuts` under X11 or `Enable key equivalents` under X11 preference item. FontForge will start XQuartz automatically for you next time.\n\n### FontForge\nInstall [FontForge](http://fontforge.github.io/en-US/downloads/mac/)\n\n## Quick Start\n\n```sh\ngrunt                           # Compiles icons into `iconfont/`\ngrunt webfont:production        # Compiles icons and styles for production\ngrunt webfont:sketchtoolkit     # Compiles only ligature iconfont for Sketch App\n```\n### Codepoints map\nExisting icons are mapped and maintained to unicode characters in `src/codepoints`\n\n\n# SVG to webfont converter for Grunt\n\n[![Build Status](https://travis-ci.org/sapegin/grunt-webfont.svg)](https://travis-ci.org/sapegin/grunt-webfont)\n\nGenerate custom icon webfonts from SVG files via Grunt. Inspired by [Font Custom](https://github.com/FontCustom/fontcustom).\n\nThis task will make all you need to use font-face icon on your website: font in all needed formats, CSS/Sass/Less/Stylus and HTML demo page.\n\n## Features\n\n* Works on Mac, Windows and Linux.\n* Very flexible.\n* Supports all web font formats: WOFF, WOFF2, EOT, TTF and SVG.\n* Semantic: uses [Unicode private use area](http://bit.ly/ZnkwaT).\n* [Cross-browser](http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax/): IE8+.\n* BEM or Bootstrap output CSS style.\n* CSS preprocessors support.\n* Data:uri embedding.\n* Ligatures.\n* HTML preview.\n* Custom templates.\n\n\n## Installation\n\nThis plugin requires Grunt 0.4. Note that `ttfautohint` is optional, but your generated font will not be properly hinted if it’s not installed. And make sure you don’t use `ttfautohint` 0.97 because that version won’t work.\n\n### OS X\n\n```\nbrew install ttfautohint fontforge --with-python\nnpm install grunt-webfont --save-dev\n```\n\n*You may need to use `sudo` for `brew`, depending on your setup.*\n\n*`fontforge` isn’t required for `node` engine (see below).*\n\n### Linux\n\n```\nsudo apt-get install fontforge ttfautohint\nnpm install grunt-webfont --save-dev\n```\n\n*`fontforge` isn’t required for the `node` engine (see [below](#available-engines)).*\n\n### Windows\n\n```\nnpm install grunt-webfont --save-dev\n```\n\nThen [install `ttfautohint`](http://www.freetype.org/ttfautohint/#download) (optional).\n\nThen install `fontforge`.\n* Download and install [fontforge](http://fontforge.github.io/en-US/downloads/windows/).\n* Add `C:\\Program Files (x86)\\FontForgeBuilds\\bin` to your `PATH` environment variable.\n\n*`fontforge` isn’t required for the `node` engine (see [below](#available-engines)).*\n\n## Available Engines\n\nThere are two font rendering engines available. See also `engine` option below.\n\n### fontforge\n\n#### Pros\n\n* All features supported.\n* The best results.\n\n#### Cons\n\n* You have to install `fontforge`.\n* Really weird bugs sometimes.\n\n### node\n\n#### Pros\n\n* No external dependencies (except optional `ttfautohint`).\n* Works on all platforms.\n\n#### Cons\n\n* Doesn’t work [with some SVG files](https://github.com/fontello/svg2ttf/issues/25).\n* Ligatures aren’t supported.\n\n\n## Configuration\n\nAdd somewhere in your `Gruntfile.js`:\n\n```javascript\ngrunt.loadNpmTasks('grunt-webfont');\n```\n\nInside your `Gruntfile.js` file add a section named `webfont`. See Parameters section below for details.\n\n\n### Parameters\n\n#### src\n\nType: `string|array`\n\nGlyphs list: SVG. String or array. Wildcards are supported.\n\n#### dest\n\nType: `string`\n\nDirectory for resulting files.\n\n#### destCss\n\nType: `string` Default: _`dest` value_\n\nDirectory for resulting CSS files (if different than font directory). You can also define `destScss`, `destSass`, `destLess` and `destStyl` to specify a directory per stylesheet type.\n\n#### Options\n\nAll options should be inside `options` object:\n\n``` javascript\nwebfont: {\n\ticons: {\n\t\tsrc: 'icons/*.svg',\n\t\tdest: 'build/fonts',\n\t\toptions: {\n\t\t\t...\n\t\t}\n\t}\n}\n```\n\n#### font\n\nType: `string` Default: `icons`\n\nName of font and base name of font files.\n\n#### fontFilename\n\nType: `string` Default: Same as `font` option\n\nFilename for generated font files, you can add placeholders for the same data that gets passed to the [template](#template).\n\nFor example, to get the hash to be part of the filenames:\n\n```js\noptions: {\n\tfontFilename: 'icons-{hash}'\n}\n```\n\n#### hashes\n\nType: `boolean` Default: `true`\n\nAppend font file names with unique string to flush browser cache when you update your icons.\n\n#### styles\n\nType: `string|array` Default: `'font,icon'`\n\nList of styles to be added to CSS files: `font` (`font-face` declaration), `icon` (base `.icon` class), `extra` (extra stuff for Bootstrap (only for `syntax` = `'bootstrap'`).\n\n#### types\n\nType: `string|array` Default: `'eot,woff,ttf'`, available: `'eot,woff2,woff,ttf,svg'`\n\nFont files types to generate.\n\n#### order\n\nType: `string|array` Default: `'eot,woff,ttf,svg'`\n\nOrder of `@font-face`’s `src` values in CSS file. (Only file types defined in `types` option will be generated.)\n\n#### syntax\n\nType: `string` Default: `bem`\n\nIcon classes syntax. `bem` for double class names: `icon icon_awesome` or `bootstrap` for single class names: `icon-awesome`.\n\n#### template\n\nType: `string` Default: ``\n\nCustom CSS template path (see `tasks/templates` for some examples). Should be used instead of `syntax`. (You probably need to define `htmlDemoTemplate` option too.)\n\nTemplate is a pair of CSS and JSON (optional) files with the same name.\n\nFor example, your Gruntfile:\n\n```js\noptions: {\n\ttemplate: 'my_templates/tmpl.css'\n}\n```\n\n`my_templates/tmpl.css`:\n\n```css\n@font-face {\n\tfont-family:\"\u003c%= fontBaseName %\u003e\";\n\t...\n}\n...\n```\n\n`my_templates/tmpl.json`:\n\n```json\n{\n\t\"baseClass\": \"icon\",\n\t\"classPrefix\": \"icon_\"\n}\n```\n\nSome extra data is available for you in templates:\n\n* `hash`: a unique string to flush browser cache. Available even if `hashes` option is `false`.\n\n* `fontRawSrcs`: array of font-face’s src values not merged to a single line:\n\n```\n[\n\t[\n\t\t'url(\"icons.eot\")'\n\t],\n\t[\n\t\t'url(\"icons.eot?#iefix\") format(\"embedded-opentype\")',\n\t\t'url(\"icons.woff\") format(\"woff\")',\n\t\t'url(\"icons.ttf\") format(\"truetype\")'\n\t]\n]\n```\n\n\n#### templateOptions\n\nType: `object` Default: `{}`\n\nExtends/overrides CSS template or syntax’s JSON file. Allows custom class names in default css templates.\n\n``` javascript\noptions: {\n\ttemplateOptions: {\n\t\tbaseClass: 'glyph-icon',\n\t\tclassPrefix: 'glyph_'\n\t}\n}\n```\n\n#### stylesheets\n\nType: `array` Default: `['css']` or extension of `template`\n\nStylesheet type. Can be `css`, `sass`, `scss` or `less`. If `sass` or `scss` is used, `_` will prefix the file (so it can be a used as a partial). You can define just `stylesheet` if you are generating just one type.\n\n#### relativeFontPath\n\nType: `string` Default: `null`\n\nCustom font path. Will be used instead of `destCss` *in* CSS file. Useful with CSS preprocessors.\n\n#### fontPathVariables\n\nType: `boolean` Default: `false`\n\nCreate font-path variables for `less`, `scss` and `sass` files. Can be used to override the `relativeFontPath`\nin custom preprocessor tasks or configs.\n\nThe variable name is a combination of the `font` name appended with `-font-path`.\n\n\n#### version\n\nType: `string` Default: `false`\n\nVersion number added to `.ttf` version of the font (FontForge Engine only). Also used in the heading of the default demo.html template. Useful to align with the version of other assets that are part of a larger system.\n\n#### htmlDemo\n\nType: `boolean` Default: `true`\n\nIf `true`, an HTML file will be available (by default, in `destCSS` folder) to test the render.\n\n#### htmlDemoTemplate\n\nType: `string` Default: `null`\n\nCustom demo HTML template path (see `tasks/templates/demo.html` for an example) (requires `htmlDemo` option to be true).\n\n#### htmlDemoFilename\n\nType: `string` Default: _`fontBaseName` value_\n\nCustom name for the demo HTML file (requires `htmlDemo` option to be true). Useful if you want to name the output something like `index.html` instead of the font name.\n\n#### destHtml\n\nType: `string` Default: _`destCss` value_\n\nCustom demo HTML demo path (requires `htmlDemo` option to be true).\n\n#### embed\n\nType: `string|array` Default: `false`\n\nIf `true` embeds WOFF (*only WOFF*) file as data:uri.\n\nIF `ttf` or `woff` or `ttf,woff` embeds TTF or/and WOFF file.\n\nIf there are more file types in `types` option they will be included as usual `url(font.type)` CSS links.\n\n#### ligatures\n\nType: `boolean` Default: `false`\n\nIf `true` the generated font files and stylesheets will be generated with opentype ligature features. The character sequences to be replaced by the ligatures are determined by the file name (without extension) of the original SVG.\n\nFor example, you have a heart icon in `love.svg` file. The HTML `\u003ch1\u003eI \u003cspan class=\"ligature-icons\"\u003elove\u003c/span\u003e you!\u003c/h1\u003e` will be rendered as `I ♥ you!`.\n\n#### rename\n\nType: `function` Default: `path.basename`\n\nYou can use this function to change how file names translates to class names (the part after `icon_` or `icon-`). By default it’s a name of a file.\n\nFor example you can group your icons into several folders and add folder name to class name:\n\n```js\noptions: {\n\trename: function(name) {\n\t\t// .icon_entypo-add, .icon_fontawesome-add, etc.\n\t\treturn [path.basename(path.dirname(name)), path.basename(name)].join('-');\n\t}\n}\n```\n\n#### skip\n\nType: `boolean` Default: `false`\n\nIf `true` task will not be ran. In example, you can skip task on Windows (becase of difficult installation):\n\n```javascript\noptions: {\n\tskip: require('os').platform() === 'win32'\n}\n```\n\n#### engine\n\nType: `string` Default: `fontforge`\n\nFont rendering engine: `fontforge` or `node`. See comparison in [Available Engines](#available-engines) section above.\n\n#### ie7\n\nType: `boolean` Default: `false`\n\nAdds IE7 support using a `*zoom: expression()` hack.\n\n#### optimize\n\nType: `boolean` Default: `true`\n\nIf `false` the SVGO optimization will not be used. This is useful in cases where the optimizer will produce faulty web fonts by removing relevant SVG paths or attributes.\n\n#### normalize\n\nType: `boolean` Default: `false`\n\nWhen using the fontforge engine, if false, glyphs will be generated with a fixed width equal to fontHeight. In most cases, this will produce an extra blank space for each glyph. If set to true, no extra space will be generated. Each glyph will have a width that matches its boundaries.\n\n#### startCodepoint\n\nType: `integer` Default: `0xF101`\n\nStarting codepoint used for the generated glyphs. Defaults to the start of the Unicode private use area.\n\n#### codepoints\n\nType: `object` Default: `null`\n\nSpecific codepoints to use for certain glyphs. Any glyphs not specified in the codepoints block will be given incremented as usual from the `startCodepoint`, skipping duplicates.\n\n```javascript\noptions: {\n\tcodepoints: {\n\t\tsingle: 0xE001\n\t}\n}\n```\n\n#### codepointsFile\nType: `string` Default: `null`\n\nUses and Saves the codepoint mapping by name to this file.\n\nNOTE: will overwrite the set codepoints option.\n\n#### autoHint\n\nType: `boolean` Default: `true`\n\nEnables font auto hinting using `ttfautohint`.\n\n#### round\n\nType: `number` Default: `10e12`\n\nSetup SVG path rounding.\n\n#### fontHeight\n\nType: `number` Default: `512`\n\nThe output font height.\n\n#### fontFamilyName\n\nType: `string` Default: _`font` value_\n\nIf you’d like your generated fonts to have a name that’s different than the `font` value, you can specify this as a string. This will allow a unique display name within design authoring tools when installing fonts locally. For example, your font’s name could be `GitHub Octicons` with a filename of `octicons.ttf`.\n\n```javascript\noptions: {\n\tfontFamilyName: 'GitHub Octicons',\n}\n```\n\n#### descent\n\nType: `number` Default: `64`\n\nThe font descent. The descent should be a positive value. The ascent formula is: `ascent = fontHeight - descent`.\n\n#### callback\n\nType: `function` Default: `null`\n\nAllows for a callback to be called when the task has completed and passes in the filename of the generated font, an array of the various font types created, an array of all the glyphs created and the hash used to flush browser cache.\n\n```javascript\noptions: {\n\tcallback: function(filename, types, glyphs, hash) {\n\t\t// ...\n\t}\n}\n```\n\n#### customOutputs\n\nType: `array` Default: `undefined`\n\nAllows for custom content to be generated and output in the same way as `htmlDemo`.\n\nEach entry in `customOutputs` should be an object with the following parameters:\n\n* `template` - (`string`) the path to the underscore-template you wish to use.\n* `dest` - (`string`) the path to the destination where you want the resulting file to live.\n* `context` \\[optional\\] - (`object`) a hash of values to pass into the context of the template\n\nAt compile-time each template will have access to the same context as the compile-time environment of `htmlDemoTemplate` (as extended by the `context` object, if provided. See config-example below.\n\n#### execMaxBuffer\n If you get stderr maxBuffer exceeded warning message, engine probably logged a lot of warning messages. To see this warnings run grunt in verbose mode `grunt --verbose`. To go over this warning you can try to increase buffer size by this option. Default value is `1024 * 200`\n\n### Config Examples\n\n#### Simple font generation\n\n```javascript\nwebfont: {\n\ticons: {\n\t\tsrc: 'icons/*.svg',\n\t\tdest: 'build/fonts'\n\t}\n}\n```\n\n#### Custom font name, fonts and CSS in different folders\n\n```javascript\nwebfont: {\n\ticons: {\n\t\tsrc: 'icons/*.svg',\n\t\tdest: 'build/fonts',\n\t\tdestCss: 'build/fonts/css',\n\t\toptions: {\n\t\t\tfont: 'ponies'\n\t\t}\n\t}\n}\n```\n\n#### Custom CSS classes\n\n```js\nwebfont: {\n\ticons: {\n\t\tsrc: 'icons/*.svg',\n\t\tdest: 'build/fonts',\n\t\toptions: {\n\t\t\tsyntax: 'bem',\n\t\t\ttemplateOptions: {\n\t\t\t\tbaseClass: 'glyph-icon',\n\t\t\t\tclassPrefix: 'glyph_'\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\n#### To use with CSS preprocessor\n\n```javascript\nwebfont: {\n\ticons: {\n\t\tsrc: 'icons/*.svg',\n\t\tdest: 'build/fonts',\n\t\tdestCss: 'build/styles',\n\t\toptions: {\n\t\t\tstylesheet: 'styl',\n\t\t\trelativeFontPath: '/build/fonts'\n\t\t}\n\t}\n}\n```\n\n#### Embedded font file\n\n```javascript\nwebfont: {\n\ticons: {\n\t\tsrc: 'icons/*.svg',\n\t\tdest: 'build/fonts',\n\t\toptions: {\n\t\t\ttypes: 'woff',\n\t\t\tembed: true\n\t\t}\n\t}\n}\n```\n\n#### Custom Outputs\n\n```javascript\nwebfont: {\n\ticons: {\n\t\tsrc: 'icons/*.svg',\n\t\tdest: 'build/fonts',\n\t\toptions: {\n\t\t\tcustomOutputs: [{\n\t\t\t\ttemplate: 'templates/icon-glyph-list-boilerplate.js',\n\t\t\t\tdest: 'build/js/icon-glyph-list.js'\n\t\t\t}, {\n\t\t\t\ttemplate: 'templates/icon-glyph-config-boilerplate.json',\n\t\t\t\tdest: 'build/js/icon-glyphs.json'\n\t\t\t}, {\n\t\t\t\ttemplate: 'templates/icon-web-home.html',\n\t\t\t\tdest: 'build/',\n\t\t\t\tcontext: {\n\t\t\t\t\thomeHeading: 'Your Icon Font',\n\t\t\t\t\thomeMessage: 'The following glyphs are available in this font:'\n\t\t\t\t}\n\t\t\t}]\n\t\t}\n\t}\n}\n```\n\nWe might then include the following corresponding templates.\n\nThe first, for `icon-glyph-list-boilerplate.js`, a file that outputs a list of icon-glyph slugs.\n\n```\n// file: icon-glyph-list-boilerplate.js\n\n(function(window) {\n\t'use strict';\n\n\tvar iconList = \u003c%= JSON.stringify(glyphs) %\u003e;\n\twindow.iconList = iconList;\n}(this));\n```\n\nThe second, for `icon-glyph-config-boilerplate.json`, a file that dumps all JSON data in the current template context.\n\n```\n// file: icon-glyph-config-boilerplate.json\n\n\u003c%= JSON.stringify(arguments[0], null, '\\t') %\u003e\n```\n\nAnd finally, the third, for `icon-web-home.html`, a file that has access to the values provided in the `context` object supplied.\n\n```\n// file: icon-web-home.html\n\n\u003c!DOCTYPE html\u003e\n\u003chtml class=\"no-js\"\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"utf-8\"\u003e\n        \u003ctitle\u003eContext Test\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003ch1\u003e\u003c%= homeHeading %\u003e\u003c/h1\u003e\n        \u003cp\u003e\u003c%= homeMessage %\u003e\u003c/p\u003e\n        \u003cul\u003e\n        \t\u003c% for (var i = 0; i \u003c glyphs.length; i++) { %\u003e\n        \t\u003cli\u003e\u003ca href=\"#\"\u003e\u003c%= glyphs[i] %\u003e\u003c/a\u003e\u003c/li\u003e\n        \t\u003c% } %\u003e\n        \u003c/ul\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## CSS Preprocessors Caveats\n\nYou can change CSS file syntax using `stylesheet` option (see above). It change file extension (so you can specify any) with some tweaks. Replace all comments with single line comments (which will be removed after compilation).\n\n### Dynamic font-path\nYou can enable the `fontPathVariables` in combination with `relativeFontPath` to create a overridable font-path.\n\nFor example scss:\n```scss\n$icons-font-path : \"/relativeFontPath/\" !default;\n@font-face {\n\tfont-family:\"icons\";\n\tsrc:url($icons-font-path + \"icons.eot\");\n\tsrc:url($icons-font-path + \"icons.eot?#iefix\") format(\"embedded-opentype\"),\n\t\turl($icons-font-path + \"icons.woff\") format(\"woff\"),\n\t\turl($icons-font-path + \"icons.ttf\") format(\"truetype\");\n\tfont-weight:normal;\n\tfont-style:normal;\n}\n```\n\n### Sass\n\nIf `stylesheet` option is `sass` or `scss`, `_` will prefix the file (so it can be a used as a partial).\n\n### Less\n\nIf `stylesheet` option is `less`, regular CSS icon classes will be expanded with corresponding Less mixins.\n\nThe Less mixins then may be used like so:\n\n```css\n.profile-button {\n\t.icon-profile;\n}\n```\n\n## Troubleshooting\n\n### I have problems displaying the font in Firefox\n\nFirefox doesn’t allow cross-domain fonts: [Specifications](http://www.w3.org/TR/css3-fonts/#font-fetching-requirements), [Bugzilla Ticket](https://bugzilla.mozilla.org/show_bug.cgi?id=604421), [How to fix it](https://coderwall.com/p/v4uwyq).\n\n### My images are getting corrupted\n\n#### Using the node engine\n\n* Certain SVG's are not supported. See the [svg2ttf](https://github.com/fontello/svg2ttf) project which is used to convert from SVG to TTF (which is then converted forward to WOFF and WOFF2).\n* `autoHint` also adjusts the font file and can cause your font to look different to the SVG, so you could try switching it off (though it may make windows view of the font worse).\n\n#### Using fontforge\n\nCheck the following...\n\n* Your paths are clockwise. Anti-clockwise paths may cause fills to occur differently.\n* Your paths are not overlapping. Overlapping paths will cause one of the areas to be inverted rather than combined. Use an editor to union your two paths together.\n* `autoHint` also adjusts the font file and can cause your font to look different to the SVG, so you could try switching it off (though it may make windows view of the font worse).\n* If you get stderr maxBuffer exceeded warning message, fontforge probably logged a lot of warning messages. To see this warnings run grunt in verbose mode `grunt --verbose`. To go over this warning you can try to increase buffer size by [execMaxBuffer](#execMaxBuffer).\n\n## Changelog\n\nThe changelog can be found on the [Releases page](https://github.com/sapegin/grunt-webfont/releases).\n\n## License\n\nThe MIT License, see the included [License.md](License.md) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrademe%2Ftrademe-iconfont","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrademe%2Ftrademe-iconfont","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrademe%2Ftrademe-iconfont/lists"}