59 строки
1.8 KiB
HTML
59 строки
1.8 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="css/mozmaker-icons.css" type="text/css">
|
|
<link rel="stylesheet" href="style.css" type="text/css">
|
|
<title>Mozmaker Icon Font Demo</title>
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
|
|
<script type="text/javascript" src="resize.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="mozmaker-icon-fonts">
|
|
|
|
<h1>Mozmaker Icon Font Demo</h1>
|
|
<p>Visit the <a href="https://github.com/flukeout/mozmaker-icon-font">Github Repo</a> for more info.</p>
|
|
|
|
<div class="demo-page">
|
|
|
|
<div class="black chunk">
|
|
<div class="large">
|
|
<span class="icon-bookmark"> .icon-bookmark<span/>
|
|
</div>
|
|
<div class="small">
|
|
<span class="icon-bookmark-small"> .icon-bookmark-small<span/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="magenta chunk">
|
|
<div class="large">
|
|
<span class="icon-bookmark"> .icon-bookmark<span/>
|
|
</div>
|
|
<div class="small">
|
|
<span class="icon-bookmark-small"> .icon-bookmark-small<span/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="blue chunk">
|
|
<div class="large">
|
|
<span class="icon-bookmark"> .icon-bookmark<span/>
|
|
</div>
|
|
<div class="small">
|
|
<span class="icon-bookmark-small"> .icon-bookmark-small<span/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<h2>Responsive Icon Test</h2>
|
|
<p>
|
|
Mouse the are below, the bookmark icon will autmoatically change depending on the size it is shown in. This is achieved via Javascript - something we could include automatically in Foxlight.
|
|
</p>
|
|
|
|
<div class="auto-size">
|
|
<span class="icon icon-bookmark"><span/>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |