tests/manual/icon.html

	icon.html revision 4679bde12548e75a51abcb9c51cde874e70427a8
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly<!DOCTYPE html>
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly<html>
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly    <head>
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly        <!-- reset the default browser styles -->
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly        <style>
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly            .yui3-button-icon {
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly                background-repeat: no-repeat;
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly                display: inline-block;
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly                height: 20px;
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly                vertical-align: middle;
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly                width: 20px;
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly            }
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly            .yui3-button-icon {
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly                background-image: url("icon-sprite-dark-and-light-24.png");
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly            }
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly
e4d8ffa5a2367d80114cae95581037557287ee3eJenny Donnelly            .yui3-button-icon-bold {
              background-position: 1px -1px;
            }

            .yui3-button-icon-italic {
              background-position: 1px -37px;
            }

            .yui3-button-icon-underline {
              background-position: 1px -73px;
            }
        </style>

        <script src='/build/yui/yui-min.js'></script>

        <script>

            YUI({
                base: '/build/',
                debug: true,
                combo: false,
                filter: 'raw'
            }).use('cssbuttons', 'cssfonts', function(Y){

            });
        </script>
    </head>

    <body>

        <h1>Button Example: Icons</h1>

        <button class="yui3-button">
            <span class="yui3-button-icon yui3-button-icon-bold"></span>
        </button>

        <button class="yui3-button">
            <span class="yui3-button-icon yui3-button-icon-bold"></span>
            Bold
        </button>

        <br /><br />

        <button class="yui3-button">
            <span class="yui3-button-icon yui3-button-icon-italic"></span>
        </button>

        <button class="yui3-button">
            <span class="yui3-button-icon yui3-button-icon-italic"></span>
            Italic
        </button>

        <br /><br />

        <button class="yui3-button">
            <span class="yui3-button-icon yui3-button-icon-underline"></span>
        </button>

        <button class="yui3-button">
            <span class="yui3-button-icon yui3-button-icon-underline"></span>
            Underline
        </button>

    </body>
</html>