121 lines
5.6 KiB
HTML
121 lines
5.6 KiB
HTML
<!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> |