diff --git a/docs/documentation/stories/include-font-awesome.md b/docs/documentation/stories/include-font-awesome.md new file mode 100644 index 000000000000..cd0219b77ef6 --- /dev/null +++ b/docs/documentation/stories/include-font-awesome.md @@ -0,0 +1,38 @@ +# Include [Font Awesome](http://fontawesome.io/) + +[Font Awesome](http://fontawesome.io/) gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. +Create a new project and navigate into the project... +``` +ng new my-app +cd my-app +``` + +Install the `font-awesome` library and add the dependency to package.json... +```bash +npm install --save font-awesome +``` + +To add Font Awesome CSS icons to your app... +```json +// in angular-cli.json + +"styles": [ + "styles.css", + "../node_modules/font-awesome/css/font-awesome.css" +] +``` + +Run `ng serve` to run your application in develop mode, and navigate to `http://localhost:4200`. + +To verify Font Awesome has been set up correctly, change `src/app/app.component.html` to the following... +```html +

+ {{title}} +

+``` + +After saving this file, return to the browser to see the Font Awesome icon next to the app title. + +### More Info + +- [Examples](http://fontawesome.io/examples/)