tests/manual/icon.html

6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright<!DOCTYPE html>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright<html>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    <head>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <!-- reset the default browser styles -->
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <style>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            .yui3-button-icon {
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                background-repeat: no-repeat;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                display: inline-block;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                height: 20px;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                vertical-align: middle;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                width: 20px;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            }
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            .yui3-button-icon-bold {
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright                background-position: 1px -1px;
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright                background-image: url("icon-sprite-dark-and-light-24.png");
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            }
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            .yui3-button-icon-italic {
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright                background-position: 1px -37px;
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright                background-image: url("icon-sprite-dark-and-light-24.png");
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            }
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            .yui3-button-icon-underline {
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright                background-position: 1px -73px;
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright                background-image: url("icon-sprite-dark-and-light-24.png");
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright            }
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright            .yui3-button-icon-follow {
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright                background-position: -24px 0px;
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright                background-image:url('http://platform.twitter.com/widgets/images/btn.c5bcc9de085c51bf889f6a8f33128be2.png');
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            }
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </style>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <script src='/build/yui/yui-min.js'></script>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <script>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            YUI({
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                base: '/build/',
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                debug: true,
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                combo: false,
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                filter: 'raw'
c270014f773974dbe11b6e0ff39990e5896caf1bDerek Gathright            }).use('cssbutton', 'cssfonts', function(Y){
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </script>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    </head>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    <body>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <h1>Button Example: Icons</h1>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class="yui3-button">
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            <span class="yui3-button-icon yui3-button-icon-bold"></span>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class="yui3-button">
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            <span class="yui3-button-icon yui3-button-icon-bold"></span>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            Bold
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <br /><br />
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class="yui3-button">
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            <span class="yui3-button-icon yui3-button-icon-italic"></span>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class="yui3-button">
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            <span class="yui3-button-icon yui3-button-icon-italic"></span>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            Italic
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <br /><br />
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class="yui3-button">
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            <span class="yui3-button-icon yui3-button-icon-underline"></span>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class="yui3-button">
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            <span class="yui3-button-icon yui3-button-icon-underline"></span>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            Underline
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright        <br /><br />
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright        <a class="yui3-button" href="http://twitter.com/yuilibrary">
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright            <span class="yui3-button-icon yui3-button-icon-follow"></span>
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright            Follow @yuilibrary
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright        </a>
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright
2fe7832f0745c00c0ca44c01a9021e9bf58e31a8Derek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    </body>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright</html>