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.js">

Note: You'll need jQuery version 1.9.0+ for this to work. Since lower versions of jQuery don't allow the modification of the type attribute.

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
});