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

Creating Meta tags for Dynamic Routes in a Nuxt 3 Build

I recently encountered an issue when trying to implement dynamic OpenGraph meta tags on a dynamically generated route in Nuxt 3 (and Vue 3). I attempted to set the meta tags dynamically using Javascript, as it was the only dynamic option supported by Nuxt ...

Create a VueJs component and globally register it with a unique custom style

I am looking to integrate Vue-Select into my VueJs project by creating a WebPack configuration that exports separate files for vendors and pages. Vue-Select offers a lot of customization options, and I want to centralize these settings in a single file for ...

Setting data for child vue components in vue-test-utils: a guide

I am currently working on a FileForm.vue component:- <template> <div class="file-form"> <form @submit="submit"> <input v-model="name" type="text" placeholder="File Name" /> <button type="submit"> < ...

What is the method to retrieve the value of a JSON object when the key matches the value of another JSON object?

Looking to expand my knowledge in javascript with an interesting challenge. Is there a way to retrieve the value of an object using another object's value as the key? For example: Obj1 = {"name":"John", "age":30, "car":null}; Obj2 = {"John":{"count ...

Issue with clicking a button in Selenium using JavaScript for automation

I'm encountering an issue where Selenium is detecting an element as disabled, despite it being enabled. To work around this, I am attempting to click on the element using JavaScript with the following code snippet: IWebElement button = driver.FindEl ...

PHP - session expires upon page refresh

I'm in the process of creating a login system for my website and I've run into an issue with updating the navigation bar once a user has logged in. Every time I refresh the page, it seems like the session gets lost and the navigation bar doesn&ap ...

Vue tutorial: Passing data between parent and child components in VueJS using methods

Working on creating a form using the v-for syntax. I have successfully managed to retrieve percentage data from the child component by simply specifying the method name. Parent Component <div v-for="(item, idx) in recipients" :key="idx"> < ...

forward to a different link following the backend script execution

I am facing a challenge with the signup.php page which includes a Facebook login button. The structure of the page is as follows: <?php if(!isset($_SESSION['logged_in'])) { echo '<div id="results">'; echo '<!-- ...

Removing an element from an array in a Laravel database using AngularJS

I am currently working on a project where I need to delete an item from my Laravel database, which is a simple Todo-List application. To achieve this, I have implemented a TodosController in my main.js file using AngularJS and created a Rest API to connect ...

I recently started delving into React Native and am currently exploring how to implement custom fonts in my application. However, I have encountered an error that is preventing me from successfully integrating

The Issue: The error I encountered only appeared after including font-related code (such as importing from "expo-font" and using "AppLoading" from "expo", and utilizing the "Font.loadAsync()" function). Error: Element type is invalid: expected a string (fo ...

Is it necessary to re-export a module after modifying an attribute in it in JS/ES6?

From my understanding of the module system, when I use import 'some_module' in a file, I will always receive the same instance of that module and not a new instance each time. However, I am a bit puzzled by a pattern I have observed in certain a ...

Create a duplicate of the table and remove specific rows

Hi there, I have a query about duplicating a table. I am looking to extract specific results and display only those results. To illustrate, here is an example in HTML code: <table class="table table-striped" id="ProfileList2"> <tbody> ...

Vue transition isn't functioning correctly without the specified mode parameter of 'out-in'

I'm struggling to comprehend why the transition doesn't smoothly roll from top to bottom without mode="out-in". When using out-in, it rolls as expected (albeit with a delay), but without it, the transition just suddenly appears after rolling dow ...

utilize ajax success method to extract json data

I'm currently working on displaying and parsing JSON data in the success function of an AJAX call. This is what I have so far: AJAX: data = "Title=" + $("#Title").val() + "&geography=" + $("#geography").val(); alert(data); url= "/portal/getRe ...

Using Python's Requests library to authenticate on a website using an AJAX JSON POST request

I'm a beginner in Python and struggling to create the correct code for using Python requests to log in to a website. Here is the form code from the website: <form autocomplete="off" class="js-loginFormModal"> <input type="hidden ...

Is there a way to retrieve data from the host URL within the getStaticPaths function in Next.js?

In my Next.js application, there is a serverless function responsible for fetching data from the host. The host URL is configured in a .env file where it is set to http://localhost:3000/api/data during development and https://productionurl.com/api/data in ...

cross-domain ajax response

Imagine a unique scenario that will pique the interest of many developers. You have a JavaScript file and a PHP file - in the JS file, you've coded AJAX to send parameters via HTTP request to the PHP file and receive a response. Now, let's delve ...

Is there a method for the parent to detect changes in its output when passing around complex objects to its child?

I am facing a challenge with a complex object that is being passed down from a parent component to its child components. The child components further break down this object and pass parts of it to their own children, creating layers of complexity. At times ...

I'm currently troubleshooting the code for the Gallery project. The gallery is supposed to have 4x4 grids, but for some reason, the grids are

It seems like I am struggling to identify the exact issue. The display on mobile looks fine but not on desktop. I attempted to tweak the isotope configuration without success. Even manipulating the server-side code didn't reveal any obvious problems. ...

Console.log() will not display any JSON duplicates

My JSON data structure is pretty flat and can have duplicate attributes. I built a logic to remove the duplicates but when testing it out, something strange happened. The logic was always counting the attributes once, resulting in no duplicates. To test th ...