Vue.js does not have the ability to toggle a font-awesome icon

Question

Vue.js does not have the ability to toggle a font-awesome icon

I am having trouble toggling a font awesome icon based on a boolean value. It seems that the font-awesome icon stays on the screen even after it is drawn:

Check out this link for reference

HTML:

<script src="https://unpkg.com/vue"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>



<div id="app">
  <input v-model="marked" type="checkbox"/>
  <i v-if="marked" class="far fa-check-square"></i>
</div>

JS:

new Vue({
  el: '#app',
  data: {
    marked: false
  }
})

Is there an issue in my code or could this be a bug in font-awesome or vue.js?

javascript vue.js font-awesome

Answer 1

Answer №1

Encountered an issue recently while working with Vue.js 2.5.x and FontAwesome 5.5.x where the icon classes did not update as expected.

Switching from FontAwesome Web Fonts + CSS to SVG + JS caused a code snippet like this to stop functioning:

<i :class="[sortByFirstNameAsc ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"></i>

The problem was that FontAwesome JavaScript would replace the <i> tag with an SVG element, resulting in the active class being applied to the hidden <i> instead of the visible SVG.

To resolve this and restore dynamic class toggling, I needed to wrap the icons in a span and utilize the v-show directive:

<span v-show="sortByFirstNameAsc"><i class="fa fa-caret-up"></i></span>
<span v-show="sortByFirstNameDesc"><i class="fa fa-caret-down"></i></span>

FontAwesome documentation now suggests using their Vue component to prevent DOM conflicts:

Compatibility Heads Up! If you are using Vue, make sure to use thevue-fontawesome package or Web Fonts with CSS.

The SVG core package is recommended for various situations:

Subsetting icons for specific use
Use in larger integrations with frameworks like React, Angular, Vue, or Ember
Utilizing tools like Webpack, Rollup, or Parcel for bundling modules
As a UMD-style loader library such as RequireJS
For server-side rendering with CommonJS

Answer 2

Encountered an issue recently while working with Vue.js 2.5.x and FontAwesome 5.5.x where the icon classes did not update as expected.

Switching from FontAwesome Web Fonts + CSS to SVG + JS caused a code snippet like this to stop functioning:

<i :class="[sortByFirstNameAsc ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"></i>

The problem was that FontAwesome JavaScript would replace the <i> tag with an SVG element, resulting in the active class being applied to the hidden <i> instead of the visible SVG.

To resolve this and restore dynamic class toggling, I needed to wrap the icons in a span and utilize the v-show directive:

<span v-show="sortByFirstNameAsc"><i class="fa fa-caret-up"></i></span>
<span v-show="sortByFirstNameDesc"><i class="fa fa-caret-down"></i></span>

FontAwesome documentation now suggests using their Vue component to prevent DOM conflicts:

Compatibility Heads Up! If you are using Vue, make sure to use thevue-fontawesome package or Web Fonts with CSS.

The SVG core package is recommended for various situations:

Subsetting icons for specific use
Use in larger integrations with frameworks like React, Angular, Vue, or Ember
Utilizing tools like Webpack, Rollup, or Parcel for bundling modules
As a UMD-style loader library such as RequireJS
For server-side rendering with CommonJS

Answer 3

Answer №2

After a blaze transforms into an svg, the "i" tag should be commented out and then wrapped in

<span v-if="marked"><i  class="far fa-check-square"></i></span>

Answer 4

After a blaze transforms into an svg, the "i" tag should be commented out and then wrapped in

<span v-if="marked"><i  class="far fa-check-square"></i></span>

Answer 5

Answer №3

When using Font Awesome with SVG, follow this tip.

If you find yourself needing to incorporate Font Awesome icons with SVG, make sure to wrap the i tag twice. Here's an example to illustrate:

<div v-if="condition">
  <i class="fal fa-caret-left"></i>
</div>
<div v-else>
  <i class="fas fa-caret-left"></i>
</div>

Rather than the above approach, try wrapping it like this:

<template v-if="condition">
  <div>
    <i class="fal fa-caret-left"></i>
  </div>
</template>
<template v-else>
  <div>
    <i class="fas fa-caret-left"></i>
  </div>
</template>

It may seem redundant to double-wrap the i tag, but for some reason, it is necessary to ensure proper functionality. This workaround worked for me, indicating that there might be additional factors at play.

Remember that replacing the inner div with template is not feasible due to rendering limitations associated with template tags.

Answer 6

When using Font Awesome with SVG, follow this tip.

If you find yourself needing to incorporate Font Awesome icons with SVG, make sure to wrap the i tag twice. Here's an example to illustrate:

<div v-if="condition">
  <i class="fal fa-caret-left"></i>
</div>
<div v-else>
  <i class="fas fa-caret-left"></i>
</div>

Rather than the above approach, try wrapping it like this:

<template v-if="condition">
  <div>
    <i class="fal fa-caret-left"></i>
  </div>
</template>
<template v-else>
  <div>
    <i class="fas fa-caret-left"></i>
  </div>
</template>

It may seem redundant to double-wrap the i tag, but for some reason, it is necessary to ensure proper functionality. This workaround worked for me, indicating that there might be additional factors at play.

Remember that replacing the inner div with template is not feasible due to rendering limitations associated with template tags.

Answer 7

Answer №4

The use of Font Awesome library in your project may cause conflicts with Vue's control. When you include an <i> tag, it gets converted to an <svg> by the library, which takes it out of Vue's jurisdiction. One solution suggested in a previous discussion on Stack Overflow was to wrap the icon with a <span>. However, if this method still doesn't work for your specific case, try adding a unique key like key="fa-sort-up" to force Vue to re-render and update the Font Awesome icon. Here's an example using this approach:

<span key="fa-sort-up" v-if="sort && descending"><i class="fas fa-sort-up"></i></span>
<span key="fa-sort-down" v-else-if="sort"><i class="fas fa-sort-down"></i></span>
<span key="fa-sort" v-else><i class="fas fa-sort"></i></span>

Remember to choose a unique key each time you need to trigger a re-render in Vue.

Answer 8

The use of Font Awesome library in your project may cause conflicts with Vue's control. When you include an <i> tag, it gets converted to an <svg> by the library, which takes it out of Vue's jurisdiction. One solution suggested in a previous discussion on Stack Overflow was to wrap the icon with a <span>. However, if this method still doesn't work for your specific case, try adding a unique key like key="fa-sort-up" to force Vue to re-render and update the Font Awesome icon. Here's an example using this approach:

<span key="fa-sort-up" v-if="sort && descending"><i class="fas fa-sort-up"></i></span>
<span key="fa-sort-down" v-else-if="sort"><i class="fas fa-sort-down"></i></span>
<span key="fa-sort" v-else><i class="fas fa-sort"></i></span>

Remember to choose a unique key each time you need to trigger a re-render in Vue.

Answer 9

Answer №5

How to Toggle a checkbox using FontAwesome in Vue.js

<style>
  .fa-check-square::before {
    color: green; 
  }
</style>

<script>
  Vue.component('checkbox',
    {
      data: 
        function() {
          return{
            isChecked: false
          }
        },
      methods: {
        toggleCheckbox: function() {
          this.isChecked = !this.isChecked;
        }
      },
      template: '<div id="test" v-on:click="toggleCheckbox">' +
        '<i v-if="isChecked" class="fa fa-check-square" style="font-size: 40px;"></i>' +
        '<i v-if="!isChecked" class="far fa-square" style="font-size: 40px;"></i>' +
        '</div>'
    });

</script>

<div id="checkboxDemo">
  <checkbox></checkbox>
  <checkbox></checkbox>
  <checkbox></checkbox>
  <checkbox></checkbox>
</div>

<script>
  new Vue({ el: '#checkboxDemo' });
</script>

Answer 10

How to Toggle a checkbox using FontAwesome in Vue.js

<style>
  .fa-check-square::before {
    color: green; 
  }
</style>

<script>
  Vue.component('checkbox',
    {
      data: 
        function() {
          return{
            isChecked: false
          }
        },
      methods: {
        toggleCheckbox: function() {
          this.isChecked = !this.isChecked;
        }
      },
      template: '<div id="test" v-on:click="toggleCheckbox">' +
        '<i v-if="isChecked" class="fa fa-check-square" style="font-size: 40px;"></i>' +
        '<i v-if="!isChecked" class="far fa-square" style="font-size: 40px;"></i>' +
        '</div>'
    });

</script>

<div id="checkboxDemo">
  <checkbox></checkbox>
  <checkbox></checkbox>
  <checkbox></checkbox>
  <checkbox></checkbox>
</div>

<script>
  new Vue({ el: '#checkboxDemo' });
</script>

Answer 11

Answer №6

To solve this issue, I decided to streamline the process by generating a separate template for each icon. These templates are then loaded conditionally based on a boolean value.

Below is my primary template structure:

<div v-if="minimised">
    <maximise-icon>
    </maximise-icon>
</div>

<div v-if="!minimised">
    <minimise-icon>
    </minimise-icon>
</div>

Subsequently, creating the icons is straightforward:

FontAwesomeConfig = { autoReplaceSvg: 'nest' } // A critical addition!

Vue.component('minimise-icon', {
    template:
    `
        <i class="fas fa-minus "></i>
    `
})

Vue.component('maximise-icon', {
    template:
    `
        <i class="fas fa-plus "></i>
    `
})

If there's a more elegant solution out there, I am open to suggestions!

Answer 12

To solve this issue, I decided to streamline the process by generating a separate template for each icon. These templates are then loaded conditionally based on a boolean value.

Below is my primary template structure:

<div v-if="minimised">
    <maximise-icon>
    </maximise-icon>
</div>

<div v-if="!minimised">
    <minimise-icon>
    </minimise-icon>
</div>

Subsequently, creating the icons is straightforward:

FontAwesomeConfig = { autoReplaceSvg: 'nest' } // A critical addition!

Vue.component('minimise-icon', {
    template:
    `
        <i class="fas fa-minus "></i>
    `
})

Vue.component('maximise-icon', {
    template:
    `
        <i class="fas fa-plus "></i>
    `
})

If there's a more elegant solution out there, I am open to suggestions!

Vue.js does not have the ability to toggle a font-awesome icon

Answer №1

Answer №2

Answer №3

When using Font Awesome with SVG, follow this tip.

Answer №4

Answer №5

Answer №6

Similar questions

Solving the problem of endless looping in JavaScript tree structures

What could be the reason for the checkbox not being selected in a React component

Tips for overlaying an image on a div regardless of its height

How can I effectively handle extensive data parsing from a file using JavaScript?

Proper method for updating a component prop in Vue.js from within its method

jQuery is displaying fields inside the widget box that were supposed to have been removed

Passing the contents of a datatable as parameters to a PHP script

Utilizing Immutable.js within React's Pure Components

Animating transitions in a Vuetify data table

In the event that the hash consists of just one string, disregard any additional conditional statements

The AngularJS 2 application reports that the this.router object has not been defined

Dynamic v-if condition based on data binding

Tips for incorporating the "define" function into your Mocha testing

What is the most effective method for identifying the initial timestamp for each day, week, or month within a collection of timestamps?

Angular: Verify that all services are fully executed before proceeding to the next step

Utilizing a React component for interactive button functionality

What is the best way to keep track of the number of checked checkboxes and add them to a separate div?

How can I show the total sum of input values in a React.js input box?

Executing a js.erb template while submitting a form with AJAX in a Rails application

Is it recommended to place the styles created by material-ui for child components after the styles generated for the parent component?