Skip to content
This repository was archived by the owner on Jun 1, 2023. It is now read-only.

Font icons not loading and how to override css and remove static text? #244

Open
harishankards opened this issue May 18, 2018 · 2 comments

Comments

@harishankards
Copy link

Hi,
I am using this wizard and it's great. Thanks for that.

Below, is my code:

<template>
  <vuestic-widget>
    <form-wizard @on-complete="onComplete">
     <tab-content title="Personal details"
                  icon="ti-user"
                  :before-change="validateAsync">
       My first tab content
     </tab-content>
     <tab-content title="Additional Info"
                  icon="ti-settings">
       My second tab content
     </tab-content>
     <tab-content title="Last step"
                  icon="ti-check">
       Yuhuuu! This seems pretty damn simple
     </tab-content>
    </form-wizard>
  </vuestic-widget>
</template>

<script>
  import {FormWizard, TabContent} from 'vue-form-wizard'
  import 'vue-form-wizard/dist/vue-form-wizard.min.css'

  export default {
    name: 'postSignup',
    components: {
      FormWizard,
      TabContent
    },
    data () {
      return {
        counter: 0
      }
    },
    methods: {
      onComplete: function () {
        alert('Yay. Done!')
      },
      validateAsync: function () {
        if (this.counter === 0) {
          this.counter ++
          console.log('its false')
          return false
        } else {
          return true
        }
      }
    }
  }
</script>

and this is my output:
image

I have 3 questions:

  1. The fonts are not getting fetched and I see it in the console: Fallback font will be used while loading: https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2
  2. How do I remove the default heading and caption for the wizard? : Awesome Wizard
  3. How to override the CSS and add my own colours instead of red?
@cristijora
Copy link
Collaborator

Hello @harishankards
Please read the docs/see demos
This is quite basic stuff and is fully covered in demos/docs
http://vuejs.creative-tim.com/vue-form-wizard/#/?id=demos

As for icons, icons is a third party package like font-awesome and are not provided by the wizard component.

@harishankards
Copy link
Author

Thanks @cristijora.

Got it. Also, I'd like to know to change the colour of the icon in the tabs which are not active. How would I achieve that?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants