Btukfyl

I am trying to toggle a font awesome icon based on a boolean value but it seems that the font-awesome icon remains on the screen after it is drawn:

https://jsfiddle.net/50wL7mdz/200312/

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

  }

})

Am I doing something wrong or is there a bug in font-awesome or vue.js?

"i" tag comments out after fire turning to svg, use some wrap <span v-if="marked"><i class="far fa-check-square"></i></span>

This answer applies to using Font Awesome with SVG.

For some reason, you need to wrap the i tag twice. For example, instead of this:

<div v-if="condition">

  <i class="fal fa-caret-left"></i>

</div>

<div v-else>

  <i class="fas fa-caret-left"></i>

</div>

do 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>

Not entirely sure why you need to wrap it twice since I'd think you decouple the i tag enough by wrapping it once, but it worked for me this way so there's apparently something else going on.

Also, keep in mind that the inner div can't be replaced with template for obvious reasons (template tags do not get rendered).

I ran into this issue recently when using Vue.js 2.5.x with FontAwesome 5.5.x — the icon classes were not being updated as expected.

After switching from the FontAwesome Web Fonts + CSS implementation to SVG + JS, the following code no longer worked:

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

What would happen is that FontAwesome JavaScript would fire and wrap the <i> tag and replace it with an SVG element, as in the following simplified example:

<span data-v-2614dbd6="">

  <svg data-v-2614dbd6="" class="svg-inline--fa fa-caret-up" ...">

    ...

  </svg>



  <!-- <i data-v-2614dbd6="" class="fa fa-caret-up"></i> -->

</span>

Unfortunately, the active class was being toggled on the inner, hidden <i> tag and not the outer, visible SVG element.

The workaround that restored the dynamic active class toggling was to wrap the FontAwesome icons in a span and use the v-show directive, as illustrated in the following code snippet:

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

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

The FontAwesome documentation now recommends using their Vue component to avoid conflicts in the DOM:

Compatibility Heads Up!
If you are using Vue you need the vue-fontawesome package or Web Fonts with CSS.

The SVG core package is helpful and recommended in the following cases:

• to subset a large number of icons into only the icons that you are using


• as base libraries for larger integrations with tools like React, Angular, Vue, or Ember (in fact our own components use these packages)


• as CommonJS/ES6 Modules bundling tool like Webpack, Rollup, or Parcel


• as UMD-style loader library like RequireJS


• directly on the server with CommonJS (see our Server Side Rendering docs

I fixed this by creating a template for each icon, then loading either template conditionally based on a boolean.

Here's my main template:

 <div v-if="minimised">



                        <maximise-icon>

                            

                        </maximise-icon>



                    </div>



                    <div v-if="!minimised">



                        <minimise-icon>

                        

                        </minimise-icon>

                     </div>

Then just create the icons like so:

FontAwesomeConfig = { autoReplaceSvg: 'nest' }//important 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 way I'm all ears!