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="//"></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:

|-- 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:


Customizing Prevue.js


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.


  color: 'red'

  color: '#44ABAB'

  color: 'rgb(33,33,33)'

  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.


    fontSize: 24