Using Spectre framework icons

The Spectre framework provides a built-in icons set which can be used with Spectre plugin plugin.In order to use these icons, you have to wrap the field in a has-icon-right class:

        
          <
          div
          
          class
          =
          "
          has-icon-right
          "
          >
          
        
        
          
          <
          input
          
          type
          =
          "
          text
          "
          
          class
          =
          "
          form-input
          "
          
          name
          =
          "
          name
          "
          
          />
          
        
        
          
          
          div
          >

Below is a starting point to use the Icon plugin along with the Spectre plugin :

        
          
          
        
        
          
          <
          link
          
          rel
          =
          "
          stylesheet
          "
          
          href
          =
          "
          https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.5.8/spectre.min.css
          "
          
          />
          
        
        
          
          <
          link
          
          rel
          =
          "
          stylesheet
          "
          
          href
          =
          "
          https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.5.8/spectre-icons.min.css
          "
          
          />
          
        
        
          
          <
          link
          
          rel
          =
          "
          stylesheet
          "
          
          href
          =
          "
          /vendors/formvalidation/dist/css/formValidation.min.css
          "
          
          />
          
        
        
          
        
        
          
          <
          form
          
          id
          =
          "
          demoForm
          "
          >
          ...
          
          form
          >
          
        
        
          
        
        
          
          <
          script
          
          src
          =
          "
          /vendors/formvalidation/dist/js/FormValidation.min.js
          "
          >
          
          
          script
          >
          
        
        
          
          <
          script
          
          src
          =
          "
          /vendors/formvalidation/dist/js/plugins/Spectre.min.js
          "
          >
          
          
          script
          >
          
        
        
          
        
        
          
          <
          script
          >
          
        
        
          
          document
          .
          addEventListener
          (
          'DOMContentLoaded'
          ,
          
          function
          (
          e
          )
          
          {
          
        
        
          
          FormValidation
          .
          formValidation
          (
          
        
        
          
          document
          .
          getElementById
          (
          'demoForm'
          )
          ,
          
        
        
          
          {
          
        
        
                          fields
          :
          
          {
          
        
        
          
          ...
          
        
        
          
          }
          ,
          
        
        
                          plugins
          :
          
          {
          
        
        
                              spectre
          :
          
          new
          
          FormValidation
          .
          plugins
          .
          Spectre
          (
          )
          ,
          
        
        
                              icon
          :
          
          new
          
          FormValidation
          .
          plugins
          .
          Icon
          (
          {
          
        
        
                                  valid
          :
          
          'form-icon icon icon-check'
          ,
          
        
        
                                  invalid
          :
          
          'form-icon icon icon-cross'
          ,
          
        
        
                                  validating
          :
          
          'form-icon loading'
          ,
          
        
        
          
          }
          )
          ,
          
        
        
          
          }
          ,
          
        
        
          
          }
          
        
        
          
          )
          ;
          
        
        
          
          }
          )
          ;
          
        
        
          
          
          script
          >

Using Spectre framework icons

See also