icon.html revision c270014f773974dbe11b6e0ff39990e5896caf1b
1516N/A<!DOCTYPE html>
858N/A<html>
858N/A <head>
858N/A <!-- reset the default browser styles -->
858N/A <style>
858N/A
858N/A .yui3-button-icon {
858N/A background-repeat: no-repeat;
858N/A display: inline-block;
858N/A height: 20px;
858N/A vertical-align: middle;
858N/A width: 20px;
858N/A background-image: url("icon-sprite-dark-and-light-24.png");
858N/A }
858N/A
858N/A .yui3-button-icon-bold {
858N/A background-position: 1px -1px;
858N/A }
858N/A
858N/A .yui3-button-icon-italic {
858N/A background-position: 1px -37px;
858N/A }
926N/A
1685N/A .yui3-button-icon-underline {
858N/A background-position: 1px -73px;
926N/A }
858N/A </style>
858N/A
858N/A <script src='/build/yui/yui-min.js'></script>
858N/A
858N/A <script>
858N/A
858N/A YUI({
858N/A base: '/build/',
858N/A debug: true,
858N/A combo: false,
858N/A filter: 'raw'
858N/A }).use('cssbutton', 'cssfonts', function(Y){
858N/A
858N/A });
858N/A </script>
1710N/A </head>
858N/A
858N/A <body>
858N/A
858N/A <h1>Button Example: Icons</h1>
858N/A
858N/A <button class="yui3-button">
858N/A <span class="yui3-button-icon yui3-button-icon-bold"></span>
858N/A </button>
858N/A
858N/A <button class="yui3-button">
858N/A <span class="yui3-button-icon yui3-button-icon-bold"></span>
858N/A Bold
858N/A </button>
858N/A
858N/A <br /><br />
858N/A
858N/A <button class="yui3-button">
858N/A <span class="yui3-button-icon yui3-button-icon-italic"></span>
858N/A </button>
858N/A
858N/A <button class="yui3-button">
858N/A <span class="yui3-button-icon yui3-button-icon-italic"></span>
858N/A Italic
858N/A </button>
858N/A
858N/A <br /><br />
858N/A
858N/A <button class="yui3-button">
858N/A <span class="yui3-button-icon yui3-button-icon-underline"></span>
858N/A </button>
858N/A
858N/A <button class="yui3-button">
858N/A <span class="yui3-button-icon yui3-button-icon-underline"></span>
858N/A Underline
858N/A </button>
858N/A
858N/A </body>
858N/A</html>