\n{{fa-icon \"quote-left\" pull=\"left\" border=true}}\n...tomorrow we will run faster, stretch out our arms farther...\nAnd then one fine morning— So we beat on, boats against the\ncurrent, borne back ceaselessly into the past.\n
\n```\n\n#### Animated Icons\n\n```hbs\n{{fa-icon \"spinner\" spin=true}}\n{{fa-icon \"circle-o-notch\" spin=true}}\n{{fa-icon \"refresh\" spin=true}}\n{{fa-icon \"cog\" spin=true}}\n{{fa-icon \"spinner\" pulse=true}}\n```\n\n#### Rotate & Flipped\n\n```hbs\n{{fa-icon \"shield\"}} normal\n{{fa-icon \"shield\" rotate=90}} rotated 90 degrees\n{{fa-icon \"shield\" rotate=180}} rotated 180 degrees\n{{fa-icon \"shield\" rotate=270}} rotated 270 degrees\n{{fa-icon \"shield\" flip=\"horizontal\"}} flipped horizontal\n{{fa-icon \"shield\" flip=\"vertical\"}} flipped vertical\n```\n\n#### Stacked Icons\n\n```hbs\n{{#fa-stack size=\"lg\" as |s|}}\n {{s.stack-2x \"square-o\"}}\n {{s.stack-1x \"twitter\"}}\n{{/fa-stack}}\n\n{{#fa-stack size=\"lg\" as |s|}}\n {{s.stack-2x \"circle\"}}\n {{s.stack-1x \"flag\" inverse=true}}\n{{/fa-stack}}\n\n{{#fa-stack size=\"lg\" as |s|}}\n {{s.stack-2x \"square\"}}\n {{s.stack-1x \"terminal\" inverse=true}}\n{{/fa-stack}}\n\n{{#fa-stack size=\"lg\" as |s|}}\n {{s.stack-2x \"square\"}}\n {{s.stack-1x \"terminal\" class=\"text-danger\"}}\n{{/fa-stack}}\n```\n\n#### The `aria-hidden` Attribute\n\nTo better support accessibility (i.e. screen readers), the helper adds the\n`aria-hidden` attribute by default:\n\n```hbs\n{{fa-icon \"star\"}}\n```\n\nResults in:\n```html\n\n```\n\nTo remove the `aria-hidden` attribute:\n\n```hbs\n{{fa-icon \"star\" ariaHidden=false}}\n```\n\n#### The `aria-label` Attribute\n\nTo better support accessibility (i.e. screen readers), the helper adds an\noptional `aria-label` attribute:\n\n```hbs\n{{fa-icon \"star\" ariaLabel=\"Click Me\"}}\n```\n\nResults in:\n```html\n\n```\n\n#### Actions\n\nYou can respond to actions on the icon by passing on action handlers:\n\n```hbs\n{{fa-icon \"star\" click=(action \"myClickHandler\")}}\n```\n\n#### Tag Name\n\nUse `tagName` to control the generated markup:\n\n```hbs\n{{fa-icon \"star\" tagName=\"span\"}}\n```\nResults in:\n\n```html\n\n```\n\n#### Custom Class Names\n\n```hbs\n{{fa-icon \"bicycle\" class=\"my-custom-class\"}}\n```\n\nResults in:\n\n```html\n\n```\n\n#### Title attribute\n\n```hbs\n{{fa-icon \"edit\" title=\"Edit the item\"}}\n```\n\nResults in:\n\n```html\n\n```\n\n### Customize with Sass/Scss or Less\n\nIf you are using the ember-cli-sass or ember-cli-less addon, you can opt-in to\nthe Scss or Less version of font-awesome by adding the following configuration\nin `ember-cli-build.js`:\n\n```js\nvar app = new EmberApp({\n 'ember-font-awesome': {\n useScss: true, // for ember-cli-sass\n useLess: true // for ember-cli-less\n }\n});\n```\n\nThen in your `app.scss` or `app.less`:\n\n```scss\n@import \"font-awesome\";\n```\n\n### Excluding assets\n\nYou can configure the addon to _not_ import any assets (CSS or font files) by adding\nthe following configuration in `ember-cli-build.js`:\n\n```js\nvar app = new EmberApp({\n 'ember-font-awesome': {\n includeFontAwesomeAssets: false\n }\n});\n```\n\nYou can also configure the addon to _only_ import specific font formats by adding\nthe following configuration in `ember-cli-build.js`:\n\n**Default:** `['eot', 'svg', 'ttf', 'woff', 'woff2', 'otf']`\n\n```js\nvar app = new EmberApp({\n 'ember-font-awesome': {\n fontFormats: ['woff', 'woff2']\n }\n});\n```\n\nIn addition, you can configure the addon to exclude the font file assets entirely by adding\nthe following configuration in `ember-cli-build.js`:\n\n```js\nvar app = new EmberApp({\n 'ember-font-awesome': {\n includeFontFiles: false\n }\n});\n```\n\n### Output path\n\nYou can change the directory where the fonts are copied to using the following configuration:\n\n```js\nvar app = new EmberApp({\n 'ember-font-awesome': {\n fontsOutput: \"/some/dir/\"\n }\n});\n```\n\nThis is useful when you change the output paths for your ember app. By default, ember-font-awesome copies the font files to `/dist/fonts`. The addon produces a css file to load the fonts that will be included in the vendor css file and expect to find the fonts at `../fonts`. If the css directory is not at the same level as the fonts directory, the site won't load the fonts.\n\nFor example, moving the css directory to `/dist/assets/css` would require the fonts directory to be `/dist/assets/fonts` and the configuration would look like this:\n\n```js\nvar app = new EmberApp({\n outputPaths: {\n app: {\n css: {\n app: \"/assets/css/app-name.css\",\n },\n js: \"/assets/js/app-name.js\",\n },\n\n vendor: {\n css: \"/assets/css/vendor.css\",\n js: \"/assets/js/vendor.js\",\n },\n },\n 'ember-font-awesome': {\n fontsOutput: \"/assets/fonts\"\n }\n});\n```\n\n## License\n\n[Public Domain](UNLICENSE)\n\n[slack]: https://embercommunity.slack.com/messages/C6UMSLS74/\n[slackin]: https://ember-community-slackin.herokuapp.com/\n[new-issue]: https://github.com/martndemus/ember-font-awesome/issues/new\n","maintainers":[{"name":"cspanring","email":"cspanring@gmail.com"}],"time":{"modified":"2022-04-05T02:02:45.462Z","created":"2017-12-20T20:37:13.509Z","3.1.0":"2017-12-20T20:37:13.509Z"},"homepage":"https://github.com/cspanring/ember-font-awesome#readme","keywords":["ember-addon"],"repository":{"type":"git","url":"git+https://github.com/cspanring/ember-font-awesome.git"},"author":{"name":"Marten Schilstra","email":"mail@martenschilstra.nl"},"bugs":{"url":"https://github.com/cspanring/ember-font-awesome/issues"},"license":"Unlicense","readmeFilename":"README.md"}