title: How to add different font awesome icons in Vue.js
body: <p>I am modeling an app section to display three different tabs with three different Font Awesome icons. So far, the tabs are set in the following way and the application shows only one icon in tab:</p>
  
  <pre><code>   &lt;div class="tab"&gt;
  
      &lt;ul class="nav nav-tabs" role="tablist"&gt;
             &lt;li v-for="(tab,index) in tabs" :class="{active : curentTab===index}" 
              @click="curentTab=index"&gt;
           &lt;a href="#"&gt;
         &lt;i class="fa fa-bullhorn" style="width:auto" aria-hidden="true"&gt;&lt;/i&gt; {{tab}}
           &lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
   &lt;/div&gt;
  </code></pre>
  
  <p>Here follows the Vue application snippet to model the tabs.</p>
  
  <pre><code>   &lt;script&gt;
     data() {
      return {
        curentTab:0,
        tabs:['Tab1','Tab2 ','Tab3']
      }
    }
    &lt;/script&gt;
  </code></pre>
  
  <p>How can I show different icons for different tabs?</p>
  
  <p>Thanks in advance!</p>