# Floor plan suggestions

**URL:** <https://discourse.nodered.org/t/floor-plan-suggestions/31230>\
**Category:** General\
**Created:** [6 August 2020 15:07 UTC](https://discourse.nodered.org/t/floor-plan-suggestions/31230 "2020-08-06T15:07:16Z")\
**Posts on this page:** 1\
**Showing post:** 51

<div class="post-metadata">

**Author:** ![alex88](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alex88/32/55523_2.png) [@alex88](https://discourse.nodered.org/u/alex88)\
**Post date:** [24 August 2020 21:49 UTC](https://discourse.nodered.org/t/floor-plan-suggestions/31230/51 "2020-08-24T21:49:02Z")

</div>

Ok, so I've been banging my head against the wall with this one for a while now.

First thing is I don't get why the syntax on almost every website, including this one, differs to the syntax that I end up having to write in the index.js file.

> **[The full guide to using Font Awesome icons in Vue.js apps - LogRocket Blog](https://blog.logrocket.com/full-guide-to-using-font-awesome-icons-in-vue-js-apps-5574c74d9b2d/)**
>
> The Font Awesome icon collection is a library of free, easy-to-use icons. In this tutorial, learn easy methods to add those icons to your Vue.js app.

Secondly, no matter what combinations I try I cannot get fa icons to appear on my webpage.

I am trying the "lite" method of only loading the icons that I need. Maybe that's my first mistake.  
I have installed all the packages recommended:

```auto
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons 
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/vue-fontawesome

```

I have tried to register the components in the index.js file and I can get to the point of no errors, but the icons don't appear on my web page.

I'd love to paste my code, but I've tried so many combinations that don't work that I think I am fundamentally doing it incorrectly. I also suspect that the end solution is very easy.

Ok, so here's one attempt that doesn't throw up immediate errors that I deduced from another post on thsi forum ([Uibuilder - extra vue enhancements](https://discourse.nodered.org/t/uibuilder-extra-vue-enhancements/14527/4)), perhaps incorrectly

```auto
Vue.component({FontAwesomeIcon : 'font-awesome-icon'}),

```

But I don't know how to then add the icon:

```auto
library.add(faCoffee)

```

I assume I don't need to import anything, but maybe I got that bit wrong as well:

```auto
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

```

Can anyone help please?

EDIT: I forgot to paste the error I am getting when I refresh the web page:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3ba7e0be554b3cb9b341dd74416b0c79ccc424a9.png)

This is the HTML:

```auto
` <template>
            <div id="app">
              <h1>Getting Started with Vue.js and Font Awesome</h1>
              <p>Have a cup of coffee: <font-awesome-icon icon="fa-coffee" /></p>
            </div>
          </template>
`

```

EDIT2: So I started reading this post:

> **[Component Registration — Vue.js](https://vuejs.org/v2/guide/components-registration.html)**
>
> Vue.js - The Progressive JavaScript Framework

And added the following code into my var app1 = new Vue:

```auto
    components: {
        FontAwesomeIcon: 'font-awesome-icon',
    },

```

And now I get this error:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/0/30249d20e8e80207de4bbaeec1bd53ed606bb84e.png)

---

_[View the full topic](https://discourse.nodered.org/t/floor-plan-suggestions/31230)._