1718 lines
77 KiB
HTML
1718 lines
77 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<!-- Mirrored from winstrap.mwspace.it/typography.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jun 2020 16:11:28 GMT -->
|
|
<head>
|
|
<!-- This is the generated HTML file of the demo page -->
|
|
<meta charset="utf-8" />
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<title>winstrap Tutorial</title>
|
|
|
|
<link rel="stylesheet" href="css/winstrap.minb0fc.css?0.5.13" />
|
|
<script src="js/vendor/jquery.min.js"></script>
|
|
<!--[if lt IE 9]>
|
|
<script src="js/vendor/html5shiv.min.js"></script>
|
|
<script src="js/vendor/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-default">
|
|
|
|
<div class="navbar-global theme-default">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<a href="http://www.microsoft.com/" class="navbar-brand">
|
|
<img src="../assets.onestore.ms/cdnfiles/onestorerolling-1511-11008/shell/v3/images/logo/microsoft.png" alt="Microsoft" height="23" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="navbar-local color-accent theme-dark">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<i class="glyph glyph-hamburger"></i>
|
|
</button>
|
|
|
|
<a href="index-2.html" class="navbar-brand">
|
|
<img src="images/winstrap_white.svg" alt="Winstrap" height="29" />
|
|
</a>
|
|
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
|
|
<ul class="nav navbar-nav">
|
|
<li class="dropdown">
|
|
<a href="colors.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Colors<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="colors.html">All colors</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="colors.html#bootstrap-colors">Bootstrap colors</a></li>
|
|
<li><a href="colors.html#mdl-colors">MDL colors</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">MDL alt colors</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="typography.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Typography<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="typography.html">All typography</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="typography.html#fonts">Fonts</a></li>
|
|
<li><a href="typography.html#sizes">Sizes</a></li>
|
|
<li><a href="typography.html#headings">Headings</a></li>
|
|
<li><a href="typography.html#subheadings">Subheadings</a></li>
|
|
<li><a href="typography.html#paragraphs">Paragraphs</a></li>
|
|
<li><a href="typography.html#captions">Captions</a></li>
|
|
<li><a href="typography.html#glyphs">Glyphs</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="layout.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Layout<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="layout.html">All layout</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="layout.html#page-header">Page header</a></li>
|
|
<li><a href="layout.html#grid">Grid</a></li>
|
|
<li><a href="layout.html#grid-small-gutters">Small gutters</a></li>
|
|
<li><a href="layout.html#spacers">Spacers</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="controls.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Controls<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="controls.html">All controls</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="controls.html#buttons">Buttons</a></li>
|
|
<li><a href="controls.html#toggle-switch">Toggle Switch</a></li>
|
|
<li><a href="controls.html#forms">Forms</a></li>
|
|
<li><a href="controls.html#putbox">Put box</a></li>
|
|
<li><a href="controls.html#progress">Progress bar</a></li>
|
|
<li><a href="controls.html#loader">Progress ring</a></li>
|
|
<li><a href="controls.html#dropdown">Dropdown</a></li>
|
|
<li><a href="controls.html#tooltips">Tooltips</a></li>
|
|
<li><a href="controls.html#flyouts">Flyouts</a></li>
|
|
<li><a href="controls.html#dialogs">Dialogs</a></li>
|
|
<li><a href="controls.html#tabs">Tabs</a></li>
|
|
<li><a href="controls.html#navs">Navbar</a></li>
|
|
<li><a href="controls.html#side-nav">Side navigation</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="components.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Components<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="components.html">All components</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="components.html#breadcrumb">Breadcrumb</a></li>
|
|
<li><a href="components.html#back-to-top">Back to top</a></li>
|
|
<li><a href="components.html#rating">Rating</a></li>
|
|
<li><a href="components.html#labels">Labels</a></li>
|
|
<li><a href="components.html#media">Media</a></li>
|
|
<li><a href="components.html#tables">Tables</a></li>
|
|
<li><a href="components.html#responsive-table">Responsive table</a></li>
|
|
<li><a href="components.html#list-items">List items</a></li>
|
|
<li><a href="components.html#entity-list">Entity list</a></li>
|
|
<li><a href="components.html#pagination">Pagination</a></li>
|
|
<li><a href="components.html#jumbotron">Jumbotron</a></li>
|
|
<li><a href="alerts.html">Alerts</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a class="color-type-secondary" href="http://winjsdevelop.azurewebsites.net/">Win Js</a>
|
|
</li>
|
|
<li>
|
|
<a class="color-type-secondary" href="#changelog" data-toggle="modal">Changelog</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="modal modal-center" id="changelog" tabindex="-1" role="dialog" aria-labelledby="changelog-label" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<i class="glyph glyph-cancel" aria-hidden="true"></i>
|
|
</button>
|
|
<h4 class="modal-title" id="changelog-label">Changelog</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<dl>
|
|
<dt class="m-t-sm">0.5.12</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Bug fixes.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.11</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Added 5 new glyphs to the symbols font.</li>
|
|
<li>Updated Bootstrap to v3.3.7.</li>
|
|
<li>Added <a href="components.html#entity-list">Entity list</a> and <a href="controls.html#putbox">Put box.</a></li>
|
|
<li>Added <code>!important</code> to spacer classes.</li>
|
|
<li>Bug fixes.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.8</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Added default styling for <code><pre></code>, <code><blockquote></code>, <code><ul></code>, <code><ol></code>, and <code><dl></code>.</li>
|
|
<li>Fixed Jumbotron max-width issue on wide screen width.</li>
|
|
<li>Navbar styling bug fixes.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.7</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Updated glyph fonts. Glyph style is now aligned with Windows 10.</li>
|
|
<li>Added new <a href="typography.html#glyphs">glyphs</a>.</li>
|
|
<li>Removed fixed width from <code>.container</code> layout.</li>
|
|
<li>Prebuilt and minified CSS files. NPM and Bower packages now come with prebuilt <code>dist</code> folder and minified CSS files.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.6</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Simplified <a href="components.html#jumbotron">Jumbotron</a>.</li>
|
|
<li>Added <code>.compressed</code> option to <a href="controls.html#navs">Navbar</a>.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.5</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Big update to <a href="controls.html#navs">Navbar</a> allowing two navbars to stack.</li>
|
|
<li>Added variable font path with <code>!default</code> declaration to enable you to set the path based on your project needs</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.3</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Added <a href="controls.html#side-nav">side-nav</a> control.</li>
|
|
<li>Moved bower to devDependency in package.json.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.4.12</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Updated toggle switch, tooltip, popover, and link button.</li>
|
|
<li>Added color themes to <code><a></code> and fixed states.</li>
|
|
<li>Changed color theme classes.</li>
|
|
<li>Updated breadcrumb styling.</li>
|
|
<li>Changed font-family variable names.</li>
|
|
<li>Updated glyphs font path.</li>
|
|
<li>Fixed checkbox glyph issue.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.4.9</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Typography:</li>
|
|
<li>Updated type ramp, classes, mixins, and functions.</li>
|
|
<li>Added type controls (headings, subheadings, paragraphs, and captions).</li>
|
|
<li>Glyphs:</li>
|
|
<li>Changed glyph names to be more semantic.</li>
|
|
<li>Added glyph function to get a glyph's unicode value.</li>
|
|
<li>Other changes:</li>
|
|
<li>Added Navbar component</li>
|
|
<li>Updated Dropdown control</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.4.4</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Updates and fixes for:</li>
|
|
<li><a href="typography.html#fonts">Responsive type</a></li>
|
|
<li><a href="controls.html#buttons">Push buttons</a></li>
|
|
<li><a href="controls.html#buttons">Toggle buttons</a></li>
|
|
<li><a href="controls.html#toggle-switch">Toggle switch</a></li>
|
|
<li><a href="components.html#back-to-top">Back-to-top button</a></li>
|
|
<li><a href="controls.html#forms">Select box</a></li>
|
|
<li><a href="alerts.html">Alerts</a></li>
|
|
<li><a href="components.html#tables">Tables</a></li>
|
|
<li><a href="components.html#jumbotron">Jumbotron and highlight bar</a></li>
|
|
<li><a href="components.html#pagination">Pagination</a></li>
|
|
<li><a href="components.html#pager">Pager</a></li>
|
|
<li>Default <code><p></code> spacing</li>
|
|
<li>Remove MDL 1.0 controls and components</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.4.0</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>New colors and color naming that reflect the latest MDL colors.</li>
|
|
<li>Remove <code>win-</code> prefix from class and variable names.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.3.2</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Rename to Winstrap.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.1.1</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Add <code>win-</code> prefix to:</li>
|
|
<li><a href="components.html#list-items">list items</a></li>
|
|
<li><a href="components.html#refine-list">refine list</a></li>
|
|
<li><a href="typography.html#fonts">typography utilities</a></li>
|
|
<li><a href="tabs.html">media browser component</a></li>
|
|
<li><a href="components.html#back-to-top">back to top component</a></li>
|
|
<li><a href="alerts.html">alert stack component</a></li>
|
|
<li><a href="layout.html#section">section component</a></li>
|
|
<li>Extend the Bootstrap grid with a <a href="layout.html#grid-small-gutters">small gutter option</a>.</li>
|
|
<li>Add a <a href="images/bootstrap-winjs.html">placeholder logo</a>.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.1.0</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Initialize bootstrap-winjs.</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-header">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h1>Typography</h1>
|
|
<ul class="nav nav-pills" data-scroll="smooth">
|
|
<li role="presentation">
|
|
<a href="#fonts">Fonts</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#sizes">Sizes</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#headings">Headings</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#subheadings">Subheadings</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#paragraphs">Paragraphs</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#captions">Captions</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#glyphs">Glyphs</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row" id="fonts">
|
|
<div class="col-xs-24">
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h2>Fonts</h2>
|
|
<p>The main typeface is Segoe UI. Selawik is an open source text font that can be used as a fallback to Segoe UI.</p>
|
|
</div>
|
|
|
|
<div class="col-xs-24 col-md-12">
|
|
<h4>Segoe UI</h4>
|
|
<hr />
|
|
<h2>Lorem Ipsum</h2>
|
|
<div class="type-sh2">Dolor sit amet</div>
|
|
<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
|
|
</div>
|
|
|
|
<div class="col-xs-24 col-md-12">
|
|
<h4>Selawik</h4>
|
|
<hr />
|
|
<h2 style="font-family: 'Selawik Light'">Lorem Ipsum</h2>
|
|
<div class="type-sh2" style="font-family: 'Selawik Semilight'">Dolor sit amet</div>
|
|
<p style="font-family: 'Selawik'">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
<p style="font-family: 'Selawik'">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p style="font-family: 'Selawik'">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="row" id="sizes">
|
|
<div class="col-xs-24">
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h2>Sizes</h2>
|
|
<p>There are nine type sizes in Winstrap. T1 is the largest, and T9 is the smallest. Winstrap type sizes are responsive.</p>
|
|
</div>
|
|
|
|
<div class="col-xs-24 col-md-12 m-t-xxs">
|
|
<div class="type-t1 inline-block">T1</div>
|
|
<div class="type-t2 inline-block m-l-xs">T2</div>
|
|
<div class="type-t3 inline-block m-l-xs">T3</div>
|
|
<div class="type-t4 inline-block m-l-xs">T4</div>
|
|
<div class="type-t5 inline-block m-l-xs">T5</div>
|
|
<div class="type-t6 inline-block m-l-xs">T6</div>
|
|
<div class="type-t7 inline-block m-l-xs">T7</div>
|
|
<div class="type-t8 inline-block m-l-xs">T8</div>
|
|
<div class="type-t9 inline-block m-l-xs">T9</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-24">
|
|
<h3>Type classes</h3>
|
|
<p>All Bootstrap classes are available. You may also use Winstrap type classes if you would like to more explicitly be connected to Microsoft design language. Responsive font-size, font-weight, and line-height are set by these classes. The Winstrap type classes are <code>type-*</code>.</p>
|
|
|
|
<pre><code class="language-xml"><div class="type-t1">T1</div>
|
|
|
|
<div class="type-t2">T2</div>
|
|
|
|
<div class="type-t3">T3</div>
|
|
|
|
<div class="type-t4">T4</div>
|
|
|
|
<div class="type-t5">T5</div>
|
|
|
|
<div class="type-t6">T6</div>
|
|
|
|
<div class="type-t7">T7</div>
|
|
|
|
<div class="type-t8">T8</div>
|
|
|
|
<div class="type-t9">T9</div>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-sm-24">
|
|
<h3>Type mixins</h3>
|
|
<p>By default, line-height is not set by the mixins below. If you want to apply the MDL line-height, you can pass the <code>set-line-height</code> argument. You can also pass the <code>responsive</code> argument to make the text responsive.</p>
|
|
|
|
<pre><code class="language-scss">.selector {
|
|
@include type(t[1-9], [set-line-height] [responsive]);
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="row" id="headings">
|
|
<div class="col-xs-24">
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h2>Headings</h2>
|
|
<p>Winstrap headings are responsive. By default, <code><h1></code> to <code><h6></code> are mapped to Winstrap heading controls.</p>
|
|
<p>You can also apply headings using the Sass mixin. Headings applied using the mixin are not responsive by default. Pass the <code>responsive</code> argument to make them responsive.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row m-t-sm">
|
|
<div class="col-md-12">
|
|
<h1>Heading 1</h1>
|
|
<h2>Heading 2</h2>
|
|
<h3>Heading 3</h3>
|
|
<h4>Heading 4</h4>
|
|
<h5>Heading 5</h5>
|
|
<h6>Heading 6</h6>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="row">
|
|
<div class="col-sm-24">
|
|
<pre><code class="language-xml"><h1>Heading 1</h1>
|
|
<div class="h1">...</div>
|
|
<div class="type-h1">...</div>
|
|
|
|
<h2>Heading 2</h2>
|
|
<div class="h2">...</div>
|
|
<div class="type-h2">...</div>
|
|
|
|
<h2>Heading 3</h2>
|
|
<div class="h3">...</div>
|
|
<div class="type-h3">...</div>
|
|
|
|
<h2>Heading 4</h2>
|
|
<div class="h4">...</div>
|
|
<div class="type-h4">...</div>
|
|
|
|
<h2>Heading 5</h2>
|
|
<div class="h5">...</div>
|
|
<div class="type-h5">...</div>
|
|
|
|
<h2>Heading 6</h2>
|
|
<div class="h6">...</div>
|
|
<div class="type-h6">...</div>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-sm-24">
|
|
<pre><code class="language-scss">.selector {
|
|
@include type-control(h[1-6], [responsive]);
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="row" id="subheadings">
|
|
<div class="col-xs-24">
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h2>Subheadings</h2>
|
|
<p>There are six Winstrap subheading controls. We recommend pairing <code>type-h1</code> with <code>type-sh1</code>, <code>type-h2</code> with <code>type-sh2</code>, etc.</p>
|
|
<p>You can also apply subheadings using the Sass mixin. Subheadings applied using the mixin are not responsive by default. Pass the <code>responsive</code> argument to make them responsive.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row m-t-sm">
|
|
<div class="col-md-12">
|
|
<div class="type-sh1">Subheading 1</div>
|
|
<div class="type-sh2">Subheading 2</div>
|
|
<div class="type-sh3">Subheading 3</div>
|
|
<div class="type-sh4">Subheading 4</div>
|
|
<div class="type-sh5">Subheading 5</div>
|
|
<div class="type-sh6">Subheading 6</div>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="row">
|
|
<div class="col-sm-24">
|
|
<pre><code class="language-xml"><div class="type-sh1">Subheading 1</div>
|
|
|
|
<div class="type-sh2">Subheading 2</div>
|
|
|
|
<div class="type-sh3">Subheading 3</div>
|
|
|
|
<div class="type-sh4">Subheading 4</div>
|
|
|
|
<div class="type-sh5">Subheading 5</div>
|
|
|
|
<div class="type-sh6">Subheading 6</div>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-sm-24">
|
|
<pre><code class="language-scss">.selector {
|
|
@include type-control(sh[1-6], [responsive]);
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="row" id="paragraphs">
|
|
<div class="col-xs-24">
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h2>Paragraphs</h2>
|
|
<p>There are four paragraph controls in Winstrap. <code><p></code> is mapped to <code>type-p3</code>.</p>
|
|
<p>You can also apply paragraphs using the Sass mixin. Paragraphs applied using the mixin are not responsive by default. Pass the <code>responsive</code> argument to make them responsive.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row m-t-sm">
|
|
<div class="col-md-12">
|
|
<p class="type-p1">Paragraph 1</p>
|
|
<p class="type-p1">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
</p>
|
|
<p class="type-p2">Paragraph 2</p>
|
|
<p class="type-p2">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
</p>
|
|
<p>Paragraph 3</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
</p>
|
|
<p class="type-p4">Paragraph 4</p>
|
|
<p class="type-p4">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="row">
|
|
<div class="col-sm-24">
|
|
<pre><code class="language-xml"><p class="type-p1">Paragraph 1</p>
|
|
|
|
<p class="type-p2">Paragraph 2</p>
|
|
|
|
<p>Paragraph 3</p>
|
|
<p class="type-p3">...</p>
|
|
|
|
<p class="type-p4">Paragraph 4</p>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-sm-24">
|
|
<pre><code class="language-scss">.selector {
|
|
@include type-control(p[1-4], [responsive]);
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="row" id="captions">
|
|
<div class="col-xs-24">
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h2>Captions</h2>
|
|
<p>Like other Winstrap type controls, captions can be applied using the type classes or the Sass mixin. Captions applied using the mixin are not responsive by default. Pass the <code>responsive</code> argument to make them responsive.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row m-t-sm">
|
|
<div class="col-md-12">
|
|
<p class="type-c1">Caption 1</p>
|
|
<p class="type-c2">Caption 2</p>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="row">
|
|
<div class="col-sm-24">
|
|
<pre><code class="language-xml"><p class="type-c1">Caption 1</p>
|
|
|
|
<p class="type-c2">Caption 2</p>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-sm-24">
|
|
<pre><code class="language-scss">.selector {
|
|
@include type-control(c[1-2], [responsive]);
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<section class="section" id="glyphs">
|
|
<header class="section-header row">
|
|
<h1 class="section-title col-xs-24">
|
|
<a href="#glyphs">Glyphs</a>
|
|
</h1>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<p>There are 259 free and open source glyphs included in Winstrap. Here are the available glyphs with their respective names. To display a glyph, add the <code>glyph</code> base class and the individual <code>glyph-*</code> class.</p>
|
|
|
|
<pre><code class="language-xml"><span class="glyph glyph-[glyph-name]" aria-hidden="true"></span>
|
|
</code></pre>
|
|
|
|
<p>Glyphs can also be displayed using the <code>glyph</code> Sass mixin:</p>
|
|
|
|
<pre><code class="language-scss">.selector {
|
|
&::before {
|
|
@include glyph( [glyph-name] );
|
|
}
|
|
}
|
|
</code></pre>
|
|
|
|
<p>If you only need to get a glyph's unicode value, you can use the Sass function:</p>
|
|
|
|
<pre><code class="language-scss">.selector {
|
|
font-family: "winjs-symbols";
|
|
|
|
&::before {
|
|
content: glyph( [glyph-name] );
|
|
}
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-chevron-up"></span></p>
|
|
<p><code>chevron-up</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-chevron-down"></span></p>
|
|
<p><code>chevron-down</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-checkmark"></span></p>
|
|
<p><code>checkmark</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-star"></span></p>
|
|
<p><code>star</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-magnifier"></span></p>
|
|
<p><code>magnifier</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-semantic-zoom"></span></p>
|
|
<p><code>semantic-zoom</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-arrow-left"></span></p>
|
|
<p><code>arrow-left</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-arrow-right"></span></p>
|
|
<p><code>arrow-right</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-chevron-left"></span></p>
|
|
<p><code>chevron-left</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-chevron-right"></span></p>
|
|
<p><code>chevron-right</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-chevron-up-2"></span></p>
|
|
<p><code>chevron-up-2</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-chevron-down-2"></span></p>
|
|
<p><code>chevron-down-2</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-checkmark-2"></span></p>
|
|
<p><code>checkmark-2</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-star-outline"></span></p>
|
|
<p><code>star-outline</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-chevron-right-2"></span></p>
|
|
<p><code>chevron-right-2</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-chevron-left-2"></span></p>
|
|
<p><code>chevron-left-2</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-previous"></span></p>
|
|
<p><code>previous</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-next"></span></p>
|
|
<p><code>next</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-play"></span></p>
|
|
<p><code>play</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-pause"></span></p>
|
|
<p><code>pause</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-edit"></span></p>
|
|
<p><code>edit</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-edit-mirrored"></span></p>
|
|
<p><code>edit-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-save"></span></p>
|
|
<p><code>save</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-clear"></span></p>
|
|
<p><code>clear</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-delete"></span></p>
|
|
<p><code>delete</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-remove"></span></p>
|
|
<p><code>remove</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-add"></span></p>
|
|
<p><code>add</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-cancel"></span></p>
|
|
<p><code>cancel</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-accept"></span></p>
|
|
<p><code>accept</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-more"></span></p>
|
|
<p><code>more</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-redo"></span></p>
|
|
<p><code>redo</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-undo"></span></p>
|
|
<p><code>undo</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-home"></span></p>
|
|
<p><code>home</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-up"></span></p>
|
|
<p><code>up</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-forward"></span></p>
|
|
<p><code>forward</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-back"></span></p>
|
|
<p><code>back</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-favorite"></span></p>
|
|
<p><code>favorite</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-camera"></span></p>
|
|
<p><code>camera</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-settings"></span></p>
|
|
<p><code>settings</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-video"></span></p>
|
|
<p><code>video</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-sync"></span></p>
|
|
<p><code>sync</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-download"></span></p>
|
|
<p><code>download</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-mail"></span></p>
|
|
<p><code>mail</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-magnifier-2"></span></p>
|
|
<p><code>magnifier-2</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-help"></span></p>
|
|
<p><code>help</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-help-mirrored"></span></p>
|
|
<p><code>help-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-upload"></span></p>
|
|
<p><code>upload</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-emoji"></span></p>
|
|
<p><code>emoji</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-two-page"></span></p>
|
|
<p><code>two-page</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-leave-chat"></span></p>
|
|
<p><code>leave-chat</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-mail-forward"></span></p>
|
|
<p><code>mail-forward</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-clock"></span></p>
|
|
<p><code>clock</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-send"></span></p>
|
|
<p><code>send</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-crop"></span></p>
|
|
<p><code>crop</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-rotate-camera"></span></p>
|
|
<p><code>rotate-camera</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-people"></span></p>
|
|
<p><code>people</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-close-pane"></span></p>
|
|
<p><code>close-pane</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-close-pane-mirrored"></span></p>
|
|
<p><code>close-pane-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-open-pane"></span></p>
|
|
<p><code>open-pane</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-open-pane-mirrored"></span></p>
|
|
<p><code>open-pane-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-world"></span></p>
|
|
<p><code>world</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-flag"></span></p>
|
|
<p><code>flag</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-preview-link"></span></p>
|
|
<p><code>preview-link</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-globe"></span></p>
|
|
<p><code>globe</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-trim"></span></p>
|
|
<p><code>trim</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-attach-camera"></span></p>
|
|
<p><code>attach-camera</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-zoom-in"></span></p>
|
|
<p><code>zoom-in</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-bookmarks"></span></p>
|
|
<p><code>bookmarks</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-bookmarks-mirrored"></span></p>
|
|
<p><code>bookmarks-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-document"></span></p>
|
|
<p><code>document</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-protected-document"></span></p>
|
|
<p><code>protected-document</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-page"></span></p>
|
|
<p><code>page</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-multi-select"></span></p>
|
|
<p><code>multi-select</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-multi-select-mirrored"></span></p>
|
|
<p><code>multi-select-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-comment"></span></p>
|
|
<p><code>comment</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-mail-2"></span></p>
|
|
<p><code>mail-2</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-contact-info"></span></p>
|
|
<p><code>contact-info</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-contact-info-mirrored"></span></p>
|
|
<p><code>contact-info-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-hang-up"></span></p>
|
|
<p><code>hang-up</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-view-all"></span></p>
|
|
<p><code>view-all</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-map-pin"></span></p>
|
|
<p><code>map-pin</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-phone"></span></p>
|
|
<p><code>phone</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-video-chat"></span></p>
|
|
<p><code>video-chat</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-switch"></span></p>
|
|
<p><code>switch</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-contact"></span></p>
|
|
<p><code>contact</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-rename"></span></p>
|
|
<p><code>rename</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-pin"></span></p>
|
|
<p><code>pin</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-music-info"></span></p>
|
|
<p><code>music-info</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-go"></span></p>
|
|
<p><code>go</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-go-mirrored"></span></p>
|
|
<p><code>go-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-keyboard"></span></p>
|
|
<p><code>keyboard</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-dock-left"></span></p>
|
|
<p><code>dock-left</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-dock-left-mirrored"></span></p>
|
|
<p><code>dock-left-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-dock-right"></span></p>
|
|
<p><code>dock-right</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-dock-right-mirrored"></span></p>
|
|
<p><code>dock-right-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-dock-bottom"></span></p>
|
|
<p><code>dock-bottom</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-remote"></span></p>
|
|
<p><code>remote</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-refresh"></span></p>
|
|
<p><code>refresh</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-rotate"></span></p>
|
|
<p><code>rotate</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-shuffle"></span></p>
|
|
<p><code>shuffle</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-list"></span></p>
|
|
<p><code>list</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-list-mirrored"></span></p>
|
|
<p><code>list-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-shop"></span></p>
|
|
<p><code>shop</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-select-all"></span></p>
|
|
<p><code>select-all</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-orientation"></span></p>
|
|
<p><code>orientation</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-import"></span></p>
|
|
<p><code>import</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-import-mirrored"></span></p>
|
|
<p><code>import-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-import-all"></span></p>
|
|
<p><code>import-all</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-import-all-mirrored"></span></p>
|
|
<p><code>import-all-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-browse-photos"></span></p>
|
|
<p><code>browse-photos</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-webcam"></span></p>
|
|
<p><code>webcam</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-picture"></span></p>
|
|
<p><code>picture</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-save-local"></span></p>
|
|
<p><code>save-local</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-caption"></span></p>
|
|
<p><code>caption</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-stop"></span></p>
|
|
<p><code>stop</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-show-results"></span></p>
|
|
<p><code>show-results</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-show-results-mirrored"></span></p>
|
|
<p><code>show-results-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-volume"></span></p>
|
|
<p><code>volume</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-repair"></span></p>
|
|
<p><code>repair</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-message"></span></p>
|
|
<p><code>message</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-page-outline"></span></p>
|
|
<p><code>page-outline</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-calendar-day"></span></p>
|
|
<p><code>calendar-day</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-calendar-week"></span></p>
|
|
<p><code>calendar-week</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-calendar"></span></p>
|
|
<p><code>calendar</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-calendar-mirrored"></span></p>
|
|
<p><code>calendar-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-characters"></span></p>
|
|
<p><code>characters</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-mail-reply-all"></span></p>
|
|
<p><code>mail-reply-all</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-mail-reply-all-mirrored"></span></p>
|
|
<p><code>mail-reply-all-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-mail-read"></span></p>
|
|
<p><code>mail-read</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-link"></span></p>
|
|
<p><code>link</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-accounts"></span></p>
|
|
<p><code>accounts</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-show-bcc"></span></p>
|
|
<p><code>show-bcc</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-hide-bcc"></span></p>
|
|
<p><code>hide-bcc</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-cut"></span></p>
|
|
<p><code>cut</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-attach"></span></p>
|
|
<p><code>attach</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-paste"></span></p>
|
|
<p><code>paste</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-filter"></span></p>
|
|
<p><code>filter</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-copy"></span></p>
|
|
<p><code>copy</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-emoji-2"></span></p>
|
|
<p><code>emoji-2</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-important"></span></p>
|
|
<p><code>important</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-mail-reply"></span></p>
|
|
<p><code>mail-reply</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-mail-reply-mirrored"></span></p>
|
|
<p><code>mail-reply-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-slideshow"></span></p>
|
|
<p><code>slideshow</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-sort"></span></p>
|
|
<p><code>sort</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-manage"></span></p>
|
|
<p><code>manage</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-all-apps"></span></p>
|
|
<p><code>all-apps</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-all-apps-mirrored"></span></p>
|
|
<p><code>all-apps-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-disconnect-drive"></span></p>
|
|
<p><code>disconnect-drive</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-map-drive"></span></p>
|
|
<p><code>map-drive</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-new-window"></span></p>
|
|
<p><code>new-window</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-open-with"></span></p>
|
|
<p><code>open-with</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-open-with-mirrored"></span></p>
|
|
<p><code>open-with-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-contact-presence"></span></p>
|
|
<p><code>contact-presence</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-priority"></span></p>
|
|
<p><code>priority</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-upload-2"></span></p>
|
|
<p><code>upload-2</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-go-to-today"></span></p>
|
|
<p><code>go-to-today</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-font"></span></p>
|
|
<p><code>font</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-font-color"></span></p>
|
|
<p><code>font-color</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-contact-2"></span></p>
|
|
<p><code>contact-2</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-folder-fill"></span></p>
|
|
<p><code>folder-fill</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-audio"></span></p>
|
|
<p><code>audio</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-placeholder"></span></p>
|
|
<p><code>placeholder</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-view"></span></p>
|
|
<p><code>view</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-set-lockscreen"></span></p>
|
|
<p><code>set-lockscreen</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-set-tile"></span></p>
|
|
<p><code>set-tile</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-cc"></span></p>
|
|
<p><code>cc</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-stop-slideshow"></span></p>
|
|
<p><code>stop-slideshow</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-permissions"></span></p>
|
|
<p><code>permissions</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-highlight"></span></p>
|
|
<p><code>highlight</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-disable-updates"></span></p>
|
|
<p><code>disable-updates</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-unfavorite"></span></p>
|
|
<p><code>unfavorite</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-unpin"></span></p>
|
|
<p><code>unpin</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-open-local"></span></p>
|
|
<p><code>open-local</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-mute"></span></p>
|
|
<p><code>mute</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-italic"></span></p>
|
|
<p><code>italic</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-underline"></span></p>
|
|
<p><code>underline</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-bold"></span></p>
|
|
<p><code>bold</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-move-to-folder"></span></p>
|
|
<p><code>move-to-folder</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-like-dislike"></span></p>
|
|
<p><code>like-dislike</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-dislike"></span></p>
|
|
<p><code>dislike</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-like"></span></p>
|
|
<p><code>like</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-align-right"></span></p>
|
|
<p><code>align-right</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-align-center"></span></p>
|
|
<p><code>align-center</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-align-left"></span></p>
|
|
<p><code>align-left</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-magnifier-3"></span></p>
|
|
<p><code>magnifier-3</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-zoom-out"></span></p>
|
|
<p><code>zoom-out</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-open-file"></span></p>
|
|
<p><code>open-file</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-other-user"></span></p>
|
|
<p><code>other-user</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-admin"></span></p>
|
|
<p><code>admin</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-street"></span></p>
|
|
<p><code>street</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-map"></span></p>
|
|
<p><code>map</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-clear-selection"></span></p>
|
|
<p><code>clear-selection</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-clear-selection-mirrored"></span></p>
|
|
<p><code>clear-selection-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-font-decrease"></span></p>
|
|
<p><code>font-decrease</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-font-increase"></span></p>
|
|
<p><code>font-increase</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-font-size"></span></p>
|
|
<p><code>font-size</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-cellphone"></span></p>
|
|
<p><code>cellphone</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-reshare"></span></p>
|
|
<p><code>reshare</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-tag"></span></p>
|
|
<p><code>tag</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-repeat-once"></span></p>
|
|
<p><code>repeat-once</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-repeat-all"></span></p>
|
|
<p><code>repeat-all</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-star-outline-2"></span></p>
|
|
<p><code>star-outline-2</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-star-2"></span></p>
|
|
<p><code>star-2</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-calculator"></span></p>
|
|
<p><code>calculator</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-directions"></span></p>
|
|
<p><code>directions</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-location"></span></p>
|
|
<p><code>location</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-library"></span></p>
|
|
<p><code>library</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-phonebook"></span></p>
|
|
<p><code>phonebook</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-memo"></span></p>
|
|
<p><code>memo</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-microphone"></span></p>
|
|
<p><code>microphone</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-post-update"></span></p>
|
|
<p><code>post-update</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-back-to-window"></span></p>
|
|
<p><code>back-to-window</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-fullscreen"></span></p>
|
|
<p><code>fullscreen</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-new-folder"></span></p>
|
|
<p><code>new-folder</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-calendar-reply"></span></p>
|
|
<p><code>calendar-reply</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-unsync-folder"></span></p>
|
|
<p><code>unsync-folder</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-report-hacked"></span></p>
|
|
<p><code>report-hacked</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-sync-folder"></span></p>
|
|
<p><code>sync-folder</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-block-contact"></span></p>
|
|
<p><code>block-contact</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-switch-apps"></span></p>
|
|
<p><code>switch-apps</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-add-friend"></span></p>
|
|
<p><code>add-friend</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-touch-pointer"></span></p>
|
|
<p><code>touch-pointer</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-go-to-start"></span></p>
|
|
<p><code>go-to-start</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-zero-bar"></span></p>
|
|
<p><code>zero-bar</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-one-bar"></span></p>
|
|
<p><code>one-bar</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-two-bars"></span></p>
|
|
<p><code>two-bars</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-three-bars"></span></p>
|
|
<p><code>three-bars</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-four-bars"></span></p>
|
|
<p><code>four-bars</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-scan"></span></p>
|
|
<p><code>scan</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-preview"></span></p>
|
|
<p><code>preview</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-hamburger"></span></p>
|
|
<p><code>hamburger</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-checkbox-composite"></span></p>
|
|
<p><code>checkbox-composite</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-checkbox-indeterminate"></span></p>
|
|
<p><code>checkbox-indeterminate</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-erase-tool"></span></p>
|
|
<p><code>erase-tool</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-warning"></span></p>
|
|
<p><code>warning</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-shopping-cart"></span></p>
|
|
<p><code>shopping-cart</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-flag-2"></span></p>
|
|
<p><code>flag-2</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-folder-open"></span></p>
|
|
<p><code>folder-open</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-folder"></span></p>
|
|
<p><code>folder</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-completed"></span></p>
|
|
<p><code>completed</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-music-album"></span></p>
|
|
<p><code>music-album</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-info"></span></p>
|
|
<p><code>info</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-devices"></span></p>
|
|
<p><code>devices</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-expand"></span></p>
|
|
<p><code>expand</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-collapse"></span></p>
|
|
<p><code>collapse</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-radio-btn-off"></span></p>
|
|
<p><code>radio-btn-off</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-radio-btn-on"></span></p>
|
|
<p><code>radio-btn-on</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-radio-bullet"></span></p>
|
|
<p><code>radio-bullet</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-media-browse"></span></p>
|
|
<p><code>media-browse</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-miracast-small"></span></p>
|
|
<p><code>miracast-small</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-miracast-large"></span></p>
|
|
<p><code>miracast-large</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-playback-rate-1x"></span></p>
|
|
<p><code>playback-rate-1x</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-playback-rate-other"></span></p>
|
|
<p><code>playback-rate-other</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-subscription-add"></span></p>
|
|
<p><code>subscription-add</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-subscription-add-mirrored"></span></p>
|
|
<p><code>subscription-add-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-subscriptions"></span></p>
|
|
<p><code>subscriptions</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-subscriptions-mirrored"></span></p>
|
|
<p><code>subscriptions-mirrored</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-folder-horizontal-open"></span></p>
|
|
<p><code>folder-horizontal-open</code></p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p><span class="glyph glyph-folder-horizontal"></span></p>
|
|
<p><code>folder-horizontal</code></p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
|
|
<a href="#top" class="back-to-top">
|
|
<i class="glyph glyph-up"></i>
|
|
<span class="sr-only">Back to top</span>
|
|
</a>
|
|
|
|
<script src="js/vendor/bootstrap.min.js"></script>
|
|
<script src="js/app.js"></script></body>
|
|
|
|
<!-- Mirrored from winstrap.mwspace.it/typography.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jun 2020 16:11:28 GMT -->
|
|
</html>
|