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:
<!-- Put them in the head tag -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
<form id="demoForm">...</form>
<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
<script src="/vendors/@form-validation/umd/plugin-semantic/index.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

See also