Issue with FontAwesome icon selection in Vue2 (nuxt) not displaying icons

If you're looking for the icon picker, you can find it here: https://github.com/laistomazz/font-awesome-picker

I've tried running it, but unfortunately, the icons are not showing up. When I inspect the elements, the code is there but the icon is missing.

<a href="#" class="item">
 <i class="fas fa-arrow-alt-circle-right"></i>
</a>

To install FontAwesome, you need to run these commands:

$    npm i --save @fortawesome/fontawesome-svg-core

$    npm i --save @fortawesome/free-solid-svg-icons
$    npm i --save @fortawesome/free-regular-svg-icons

$    npm i --save @fortawesome/vue-fontawesome@latest

For setting up the library on vanilla Vue, the documentation recommends the following steps:

In your src/main.js file. source: https://fontawesome.com/docs/web/use-with/vue/add-icons

  import Vue from 'vue'
import App from './App'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* add icons to the library */
library.add(faUserSecret)

/* add font awesome icon component */
Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

As I'm using Nuxt, I imported the component in 'plugins/global-components.js' but the icons still aren't rendering. Can someone assist me with this issue?

Answer №1

To integrate Font Awesome with your Nuxt project, you will need to install the @nuxtjs/fontawesome package. There is comprehensive documentation available on how to use Font Awesome with Nuxt at this link.

Here is an example of how I implemented Font Awesome in my Nuxt project:

nuxt.config.js

import fontawesome from './fontawesome'

export default {
  buildModules: [
    '@nuxtjs/fontawesome'
  ],
  fontawesome,
}

fontawesome.js

export default {
  component: 'Icon',
  icons: {
    brands: ['faFacebookF', 'faVk', 'faInstagram', 'faTelegramPlane'],
  },
  proIcons: {
    light: ['faImage', 'faVideo'],
    solid: ['faGripVertical'],
    regular: ['faTimes', 'faSearch', 'faVolume', 'faCog', 'faExpandWide'],
  },
}

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

Utilizing Angular to Toggle Visibility with Button Directives

Within my main view, I have three directives that each display different sets of data. <div> <sales-view></sales-view> </div> <div> <units-view></units-view> </div> Addi ...

AngularJS and Bootstrap carousel combined for a dynamic multi-item per slide display

Currently, I am utilizing Bootstrap to showcase a carousel on my website, where multiple items are displayed per slide as demonstrated in this example. The use of static images has yielded satisfactory results, as evidenced by the jsFiddle example found he ...

HTML: Efficiently updating multiple cell contents in a large table using jQuery or JavaScript

Hello, I am currently working on developing an HTML page that consists of a large data table. My goal is to have the data in the table update dynamically as the user interacts with various controls on the page, without having to reload the entire page. ...

Having trouble understanding why my JavaScript for loop is looping only once

I'm having trouble getting my for loop to output each character of a string argument one at a time. However, when I test the code, it only displays the first character and then stops. I'm not sure what is causing it to only loop through once. Be ...

Using Angular to Apply a Custom Validation Condition on a FormGroup Nested Within Another FormGroup

I am facing an issue with my form validation logic. I have a set of checkboxes that need to be validated only when a specific value is selected from a dropdown. The current validator checks the checkboxes regardless of the dropdown value. Here's the c ...

Mastering the art of iterating through arrays using node.js request()

After transitioning from passing single values to multiple values in my node API, I encountered an issue where the API no longer responded. Here is an example of single values for fields: tracking: "123", // Only one tracking number carrier: "usps" // On ...

The comparison between form submission and AJAX request when transmitting data in JSON format

Working on a complex PHP/Drupal project, our team is facing the challenge of enabling a deep link into a page that requires extensive data to be passed from the originating site. We have full control over both ends so cross-domain issues are not a concern ...

What are some ways to customize the appearance of the Material UI table header?

How can I customize the appearance of Material's UI table header? Perhaps by adding classes using useStyle. <TableHead > <TableRow > <TableCell hover>Dessert (100g serving)</TableCell> ...

Can anyone provide guidance on locating the parent of a pseudo element with Selenium WebDriver?

Is there a way to retrieve the parent web element of a pseudo element (if we can call it the parent) using JavaScript? I know that Selenium's methods for searching for web elements are not suitable for pseudo elements, but JavaScript does allow manipu ...

Exploring the potential of utilizing functions in express.js to take advantage of the "locals"

Having experience with Rails/Sinatra, I am accustomed to using helper functions in my view files. However, incorporating this functionality into express.js has proven to be quite challenging. You can include locals automatically like this... app.set("nam ...

Creating an Observable Collection in Angular using AngularFire2 Firestore

I am currently using material 2 and attempting to develop data tables with pagination and sorting. In order to achieve this, I require my collections to be observable. However, I believe that I might be incorrectly populating or initializing the arrays in ...

Deactivate the button for each package based on a specific PHP value

Are you looking to purchase a package or multiple packages? The available packages are displayed in the table below. I would like to implement a feature where once a user buys a package, the corresponding button for that package is disabled. Here is my cu ...

In order to set a condition for the mat date picker to display a text box in Angular if the selected date is for someone under 18 years old

I need assistance with displaying a text field based on age validation. The requirement is to show the input field only if the age is less than 18. Below is the code snippet I am currently working with: <form [formGroup]="form"> ...

Guide on incorporating d3 axis labels within <a> elements?

Issue at Hand: I am working with a specific scale var y = d3.scalePoint().domain(['a','b','c']).range([0,100]); I have successfully created an axis for this scale var y_axis = svg.append("g").attr("class", "axis").call(d3. ...

Creating Awesome Icons in Kendo Grid with Code In this tutorial, we will learn how to programm

Looking to have a Kendo grid display a green fas-fa-clock icon if isActive is true, and a grey far-fa-clock icon if false. Clicking on the icon should toggle between true and false. Currently, the grid just shows the word true or false in the column. Cod ...

Having trouble with Onsen UI + React Navigator pushPage function?

After experimenting with the Onsen playground and React Combining Navigator and Tabbar example, I created this unique animation: I decided to reposition the button and input field for adding more users by using a fab. However, when I attempted to call nav ...

Guide on how to address the problem of the @tawk.to/tawk-messenger-react module's absence of TypeScript definitions

Is there a way to fix the issue of missing TypeScript definitions for the @tawk.to/tawk-messenger-react module? The module '@tawk.to/tawk-messenger-react' does not have a declaration file. 'c:/develop/eachblock/aquatrack/management-tool-app ...

Display the output of JSON.stringify in a neatly formatted table

After sending my table data to the database using ajax, I am now trying to retrieve it by clicking on the open button. $.ajax({ type: "POST", url: "http://localhost/./Service/GetPageInfo", dataType: "json", ...

Unable to establish a new pathway in the index.js file of a Node.js and Express website running on Heroku

I recently made some changes to my index.js file: const express = require('express'); const path = require('path'); const generatePassword = require('password-generator'); const fetch = require('node-fetch'); const ...

What is the best way to reset the selected label in a React Material AutoComplete component when the state is

I currently have a state declared as: const [searchEntryNo, setSearchEntryNo] = useState(''); In addition, there is a function set up to clear the state when needed. const handleClear = () => { setSearchEntryNo(''); }; Ne ...