Basic Usage

Prevue.js is very easy to use. Just add the following to your HTML:

// Font icon styles
<link rel="stylesheet" href="css/font-awesome-eyes.css">

// In case you need jQuery on the fly
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

// Then add Prevue.js
<script src="js/jquery.prevue-1.0.0.js">

Then copy the font directory to your project's root directory so it looks like:

your-project
|-- css
|   `-- font-awesome-eyes.css
|-- font
|   |-- font-awesome-eyes.eot
|   |-- font-awesome-eyes.svg
|   |-- font-awesome-eyes.ttf
|   `-- font-awesome-eyes.woff
`-- js
    `-- jquery.prevue-1.0.0.js

It doesn't necessarily have to be like the directory structure. But you might have to modify font-awesome-eyes.css if your directory structure is different.

Then just add a class to your password fields and call prevue() on those elements.

Simple Example

Below is a simple example on using Prevue.js.

Here's the markup for the output above:

<label for="password">Try clicking the eye icon and start typing</label>
<input type="password" class="preview-password" id="password">

And here's the JavaScript:

$(document).ready(function(){
  $('.preview-password').prevue();
});

Customizing Prevue.js

Colors

You can also change the color of the icon by passing a color value to its options. As long as it's a valid CSS color value, it will work.

JavaScript:

$('.preview-password-red').prevue({
  color: 'red'
});

$('.preview-password-hex').prevue({
  color: '#44ABAB'
});

$('.preview-password-rgb').prevue({
  color: 'rgb(33,33,33)'
});

$('.preview-password-rgba').prevue({
  color: 'rgba(100,100,100,0.5)'
});  

Other Options

You can also make the icon larger when you're using large password fields through the fontSize option. Just make sure the value is in pixels.

JavaScript:

$('.preview-password-large').prevue({
    fontSize: 24
});