Using Semantic UI framework icons

The Semantic UI framework provides an icon set which can be used with the Icon plugin.

Followed by the suggestion from Semantic UI, the input must place inside ui input icon element:

        
          <
          div
          
          class
          =
          "
          ui input icon
          "
          >
          
        
        
          
          <
          input
          
          type
          =
          "
          text
          "
          
          name
          =
          "
          name
          "
          
          />
          
        
        
          
          
          div
          >

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

        
          
          
        
        
          
          <
          link
          
          rel
          =
          "
          stylesheet
          "
          
          href
          =
          "
          https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.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/Semantic.min.js
          "
          >
          
          
          script
          >
          
        
        
          
        
        
          
          <
          script
          >
          
        
        
          
          document
          .
          addEventListener
          (
          'DOMContentLoaded'
          ,
          
          function
          (
          e
          )
          
          {
          
        
        
          
          FormValidation
          .
          formValidation
          (
          
        
        
          
          document
          .
          getElementById
          (
          'demoForm'
          )
          ,
          
        
        
          
          {
          
        
        
                          fields
          :
          
          {
          
        
        
          
          ...
          
        
        
          
          }
          ,
          
        
        
                          plugins
          :
          
          {
          
        
        
                              semantic
          :
          
          new
          
          FormValidation
          .
          plugins
          .
          Semantic
          (
          )
          ,
          
        
        
                              icon
          :
          
          new
          
          FormValidation
          .
          plugins
          .
          Icon
          (
          {
          
        
        
                                  valid
          :
          
          'checkmark icon'
          ,
          
        
        
                                  invalid
          :
          
          'remove icon'
          ,
          
        
        
                                  validating
          :
          
          'refresh icon'
          ,
          
        
        
          
          }
          )
          ,
          
        
        
          
          }
          ,
          
        
        
          
          }
          
        
        
          
          )
          ;
          
        
        
          
          }
          )
          ;
          
        
        
          
          
          script
          >

Using Semantic UI framework icons

Using Semantic UI framework icons

See also