Tips on including various font awesome icons in Vue.js

I am working on designing a section for an app that will feature three tabs, each with its own unique Font Awesome icon. Currently, I have set up the tab structure as shown below, but only one icon is displaying in the tab:

   <div class="tab">

    <ul class="nav nav-tabs" role="tablist">
           <li v-for="(tab,index) in tabs" :class="{active : curentTab===index}" 
            @click="curentTab=index">
         <a href="#">
       <i class="fa fa-bullhorn" style="width:auto" aria-hidden="true"></i> {{tab}}
         </a></li>
      </ul>

 </div>

Below is the snippet of the Vue application used to set up these tabs.

   <script>
   data() {
    return {
      curentTab:0,
      tabs:['Tab1','Tab2 ','Tab3']
    }
  }
  </script>

Any suggestions on how I can display different icons for each tab?

Thank you in advance!

javascriptvue.jswebpackfont-awesomewebpack-2

Answer №1

If you want to display each tab with a specific icon, you can update your data model by assigning a different icon to each tab. For instance:

tabs:[
  {label: 'Tab1', icon:'smile'},
  {label: 'Tab2', icon:'bullhorn'},
  {label: 'Tab3', icon:'heart'}
]

In addition, adjust your template by dynamically setting the i CSS class. Here's how you can achieve this:

  1. Create a Vue method that returns the corresponding FontAwesome CSS class, for example:
    methods: {
         faClass(icon) {
            return `fa fa-${icon}`;
          }
        }
  1. Call this new method in your template, like so:
<i :class="[faClass(tab.icon)]" style="width:auto" aria-hidden="true">

This way, the class is bound through Vue directly.

To implement this with your example, you will have:

HTML template

<div id='app'>
  <ul class="nav nav-tabs" role="tablist">
           <li v-for="(tab,index) in tabs" :class="{active : curentTab===index}" 
            @click="curentTab=index">
         <a href="#">
       <i :class="[faClass(tab.icon)]" 
           style="width:auto" 
           aria-hidden="true"></i> {{tab.label}}
         </a></li>
      </ul>
</div>

Vue instance

    ...
    data: function() {
       return {
        curentTab:0,
        tabs:[
         {label: 'Tab1', icon:'smile'},
         {label: 'Tab2', icon:'bullhorn'},
         {label: 'Tab3', icon:'heart'}
       ]
      }
     },
      methods: {
        faClass(icon) {
          return 'fa fa-'+icon;
        }
      }
    ...

Visit this CodePen link to see the implementation in action.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animate a div component sliding out while seamlessly introducing a new one using React

For my signin page, I've set it up so that users first enter their username and then click next to trigger a fluid slide animation which reveals the password field from the right. Although the separate components are already coded and the animation wo ...

javascriptreactjsnode.js

Image Carousel Extravaganza

Trying to set up a sequence of autoplaying images has been a bit of a challenge for me. I've attempted various methods but haven't quite nailed it yet. Take a look at what I'm aiming for: https://i.stack.imgur.com/JlqWk.gif This is the cod ...

javascripthtmlcssanimation

What sets apart npm correlation-id from uuid?

Can you please explain the distinction between the uuid and correlation-id npm packages? It seems that correlation-id actually utilizes the uuid package internally.. When would you recommend using correlation-id over uuid? Important: I am not utilizing ...

javascriptnode.jsreactjsangularnpm

The specified function 'isFakeTouchstartFromScreenReader' could not be located within the '@angular/cdk/a11y' library

I encountered the following errors unexpectedly while working on my Angular 11 project: Error: ./node_modules/@angular/material/fesm2015/core.js 1091:45-77 "export 'isFakeTouchstartFromScreenReader' was not found in '@angular/cdk/a11y&a ...

javascriptangulartypescriptdependency-managementangular-cdk

Using a package with `webfontloader` in NextJs for Server-Side Rendering: A guide

Currently, I am working on creating an application with nextJS and incorporating a package that utilizes Webfontloader internally. After installing the library, my application encountered an error preventing it from running successfully. It seems like th ...

javascriptwebpacknext.jsserver-side-renderingwebfonts

The onmouseout event seems to be malfunctioning, whereas onmouseover is functioning properly

Forgive me if you're viewing this post twice, I believe I could have clarified things better. Essentially, I am designing a page that contains numerous elements. When the mouse hovers over an element, a "status" box should overlay on top of it. This ...

javascripthtmljqueryonmouseoveronmouseout

Troubleshooting server-side sorting issues with AJAX implementation, encountering problems with headers functionality

I'm encountering a problem: Some headers are not functioning properly to sort the table. For example, Brand and Model work as expected, but VehicleType only works once, and CarID and ReleaseDate never seem to work. Here is my index.php file: index. ...

javascriptphpjqueryajax

How to create a button with an icon using Fontawesome and Bootstrap 4?

I'm having difficulty incorporating Font Awesome into my Bootstrap 4 project. Despite including all the necessary files, the icons are not appearing on the screen. Can someone please help me troubleshoot my code? <!-- Latest compiled and minifie ...

bootstrap-4font-awesome

When utilizing forEach to loop through and interact with elements in React Testing Library, the onClick event handler is not triggered. However, employing a for loop successfully triggers the

In my React project, I've created a functional component called Shop. It accepts a callback function as a prop and displays a list of items. Each item in the list triggers the callback when clicked. function Shop(props) { const { onClickMenu } = p ...

javascriptreactjsjestjsreact-testing-library

Controlled number scale visualization

I am currently working on mapping a rotation angle scale in degrees to a light intensity scale representing the movement of a rotating sun, with values ranging from 0.0 to 0.9. To accomplish this, I have implemented a custom mapping function as shown below ...

javascriptthree.jsphysics

Implementing Express.js allows for the seamless casting of interfaces by the body within the request

I have created a similar structure to ASP.NET MVC and uploaded it on my github repository (express-mvc). Everything seems fine, but I am facing an issue with casting the body inside the request object to match any interface. This is what I am aiming for: ...

javascriptnode.jstypescriptexpress

Guide on Implementing jQuery Plugin with Vue, Webpack, and Typescript

I am currently exploring the integration of the jQuery Plugin Chosen into my vue.js/Webpack project with TypeScript. After some research, I discovered that it is recommended to encapsulate the plugin within a custom Vue component. To kick things off, I m ...

javascriptjquerytypescriptvue.jswebpack

Error: `X` is not a function, specifically when trying to use an imported function following the webpack bundling process

After pushing my module to npm and importing it into another application, I encounter the error message TypeError: <myModule> is not a function. I am unsure if the issue lies with webpack, how I am declaring/using the imported function when bundled ...

node.jsnpmwebpack

Failure to trigger success or error callbacks in Angular's $http.get request

Trying to access the nutritionix v1_1 API through a get request has been a bit tricky. Despite the function being called successfully and passing the correct data, the $http.get request seems to be causing some trouble. It simply skips over the remaining c ...

javascriptangularjsmodel-view-controllerangular-promiseangular-http

The custom validation process encountered an error: callback is not a valid function

Encountering an issue with a custom validator in node.js while using mongoose. The goal is to verify if a query already exists in the headerLog before attempting to insert it. Take a look at the code snippet below: var mongoose = require('mongoose& ...

javascriptnode.jsmongodbmongoose

Issue with ng-bind-html in TranslateJS causing problems

I have been working on implementing translation in a web application using angularJS and the angular-translate repository, which can be found at . As per the documentation, it is possible to use this repository to set text for a specific element in the HTM ...

javascriptangularjs

Accessing the state value within the render method in ReactJS can provide crucial information

Just starting out with React and ran into an issue while trying to pass state in constructor to the render method. My h1 element is not showing up on the screen. Any idea what I might be doing wrong? class Mod extends React.Component { constructor( ...

javascriptreactjs

Creating a Flot Bar Chart that displays non-stacking values

I am new to using Flot for creating charts. Currently, I have a bar chart displayed below: https://i.stack.imgur.com/RSumf.png Here is the code snippet I utilized to generate this chart: $.getJSON('chartBar.json', function(graphDataBar){ $ ...

javascriptjquerygraphchartsflot

Determine the file format using fs module in Node.js

I have a question about extracting file types or extensions from a folder. I have multiple files in a folder, and I want to retrieve the type/extension of the file that matches a randomly generated number stored in my num variable. Is there a way to achiev ...

javascriptnode.jsfs

How to efficiently transfer data between Node and Angular 7 using Electron

After setting up an Angular 7 application running on http://localhost:4200, I developed a Node JS application responsible for authenticating users on Facebook, accessible at http://localhost:3000. The callback redirection functions correctly within the No ...

javascriptnode.jsangularelectron