How to add the PixelPin logo to the PixelPin sso button

Updated March 23rd 2017

This is a guide on how add the PixelPin logo to your PixelPin SSO button.

Via CDN

  1. Add the following code into your html header:

    <link rel="stylesheet" href="https://cdn.rawgit.com/PixelPinPlugins/PPIcon/2f536b59/style.css">
    <script defer src="https://cdn.rawgit.com/PixelPinPlugins/PPIcon/08f31198/svgxuse.js"></script>
    

  2. Then modify your SSO PixelPin button to include the PixelPin glyphicon:

    <a class="btn btn-default" href=""><svg class="icon icon-pixelpin-connect"><use xlink:href="#icon-pixelpin-connect"></use></svg> <b>Sign In Using PixelPin</b></a>
    

  3. With this method, the SSO button will now look like this:

    Sign In Using PixelPin

Locally

  1. Download the PixelPin glyphicon source code from here.

  2. Extract style.css and svgxuse.js into their appropiate folders.

  3. Specify the css and js file in your html header.

  4. Then modify your SSO PixelPin button to include the PixelPin glyphicon:

    <a class="btn btn-default" href=""><svg class="icon icon-pixelpin-connect"><use xlink:href="#icon-pixelpin-connect"></use></svg> <b>Sign In Using PixelPin</b></a>
    

  5. With this method you can modify the look of the pixelpin logo so you can have it white on black rather than black on white,but the default SSO button will look like this:

    Sign In Using PixelPin