diff options
Diffstat (limited to 'vendor/mervick/material-design-icons/demo/index.html')
| -rw-r--r-- | vendor/mervick/material-design-icons/demo/index.html | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/vendor/mervick/material-design-icons/demo/index.html b/vendor/mervick/material-design-icons/demo/index.html new file mode 100644 index 000000000..e46163157 --- /dev/null +++ b/vendor/mervick/material-design-icons/demo/index.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>Bootstrap Material Design Icons</title> + <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet"> + <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"/> + <link rel="stylesheet" type="text/css" href="style/main.css?v18"/> + <link rel="stylesheet" type="text/css" href="../css/material-icons.min.css?v1.1.2"/> +</head> +<body> + <div class="wrap"> + + <header> + <div id="head-panel"> + <div class="container"> + <h1>Bootstrap Material Design Icons</h1> + <div class="buttons"> + <a class="github-button" href="https://github.com/mervick/material-design-icons" data-style="mega" data-count-href="/mervick/material-design-icons/stargazers" data-count-api="/repos/mervick/material-design-icons#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star mervick/material-design-icons on GitHub">Star</a> + <a class="github-button" href="https://github.com/mervick/material-design-icons/archive/master.zip" data-icon="octicon-cloud-download" data-style="mega" aria-label="Download mervick/material-design-icons on GitHub">Download</a> + </div> + </div> + </div> + <div id="search-panel"> + <div class="container"> + <div class="search-icon"> + <i class="mdi mdi-search"></i> + </div> + <input type="text" id="search" placeholder="Search" aria-label="Search"/> + <div class="search-icon clear-icon" style="display: none;"> + <i class="mdi mdi-close"></i> + </div> + </div> + </div> + </header> + + <div class="container"> + <div class="content"> + + <p>Material design icons are the <a href="http://www.google.com/design/spec/style/icons.html#icons-system-icons">official icon</a> + set from Google that are designed under the <a href="http://www.google.com/design/spec">material design guidelines</a>.</p> + <p>In the official package the icons uses a typographic feature called <a href="http://alistapart.com/article/the-era-of-symbol-fonts">ligatures</a>, + which allows rendering of an icon glyph simply by using its textual name.</p> + <p><a href="https://github.com/mervick/material-design-icons">Bootstrap Material Design Icons</a> implements the ability to use the icons in the <code>bootstrap-style</code>, like in + <code>glyphicon</code>, <code>font-awesome</code> or <code>ionicons</code>.</p> + + <div id="grid-container"></div> + + </div> + </div> + + <div id="snackbar"></div> + + </div> + + <footer> + <div id="footer"> + <div class="container"> + <p><a href="https://github.com/google/material-design-icons">Google Material Design Icons</a> fonts files are + licensed under the <a href="https://github.com/google/material-design-icons/blob/master/LICENSE">CC-BY-4.0</a>, + maintained by <a href="https://github.com/google">Google</a>.</p> + <p><a href="https://github.com/mervick/material-design-icons">Bootstrap Material Design Icons</a> css and sass files are + licensed under the <a href="http://opensource.org/licenses/mit-license.html">MIT License</a>, + maintained by <a href="https://github.com/mervick">mervick</a>.</p> + </div> + </div> + </footer> + + <script id="empty-grid" type="text/template"> + <div class="no-results">No matches found</div> + </script> + + <script id="grid-item" type="text/template"> + <div class="item"> + <% if (is_new) { %> + <div class="new-badge">New</div> + <% } %> + <i class="mdi mdi-<%= className %>"></i> + <div class="caption"><%= caption %></div> + </div> + </script> + + <script id="snackbar-template" type="text/template"> + <div class="container"> + <div class="snackbar-header"> + <i class="mdi mdi-<%= className %>"></i> + <span class="caption"><%= caption %></span> + <div class="right-side"> + <i class="mdi mdi-code"></i> + <span class="caption">ICON FONT</span> + </div> + </div> + <div class="snackbar-content flex"> + <div class="col"> + <h2>STEP 1: Setup Icon Font</h2> + <p>Follow the <a href="https://github.com/mervick/material-design-icons">instructions</a> to embed the icon + font in your site and learn how to style your icons using CSS.</p> + </div> + <div class="col"> + <h2>STEP 2: Use Icon in Your Site</h2> + <p class="code comment"><!-- Bootstrap style, for modern browsers, IE > 8. --></p> + <textarea class="code" readonly><i class="mdi mdi-<%= className %>"></i></textarea> + <p class="code comment"><!-- Ligature style, for modern browsers, IE > 9. --></p> + <textarea class="code" readonly><i class="material-icons"><%= content %></i></textarea> + <p class="code comment"><!-- For IE9 or below. --></p> + <textarea class="code" readonly><i class="material-icons">&#x<%= code %>;</i></textarea> + <p></p> + </div> + </div> + </div> + </script> + + <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script> + <script src="js/data.js?v1.1.2"></script> + <script src="js/main.js?v1.1.2"></script> + +</body> +</html>
\ No newline at end of file |