font-icon
Version:
create font icon from svg
201 lines (196 loc) • 4.95 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VCPlayer</title>
<link href="css/icons.css" rel="stylesheet">
<style>
body {
text-align: center;
}
header {
/*text-align: center;*/
}
.preview {
display: inline-block;
border: 1px solid #ccc;
text-align: center;
width: 150px;
margin: 10px;
padding: 10px;
}
.preview-icon {
width: 100%;
font-size: 200%;
}
</style>
</head>
<body>
<header>
<h1>VCPlayer Icons</h1>
<p>All icons prefixed by <code>vjs-icon-</code></p>
</header>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-vc-play1"></span>
</div>
<span>vjs-icon-vc-play1</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-vc-play2"></span>
</div>
<span>vjs-icon-vc-play2</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-k14vp-duration"></span>
</div>
<span>vjs-icon-k14vp-duration</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-k14vp-exit-fullscreen"></span>
</div>
<span>vjs-icon-k14vp-exit-fullscreen</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-k14vp-fullscreen"></span>
</div>
<span>vjs-icon-k14vp-fullscreen</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-k14vp-pause"></span>
</div>
<span>vjs-icon-k14vp-pause</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-k14vp-play"></span>
</div>
<span>vjs-icon-k14vp-play</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-k14vp-setting"></span>
</div>
<span>vjs-icon-k14vp-setting</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-k14vp-volume-full"></span>
</div>
<span>vjs-icon-k14vp-volume-full</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-k14vp-volume-half"></span>
</div>
<span>vjs-icon-k14vp-volume-half</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-k14vp-volume-mute"></span>
</div>
<span>vjs-icon-k14vp-volume-mute</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-k14vp-volume"></span>
</div>
<span>vjs-icon-k14vp-volume</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-vc_spinner"></span>
</div>
<span>vjs-icon-vc_spinner</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-links"></span>
</div>
<span>vjs-icon-links</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-refresh"></span>
</div>
<span>vjs-icon-refresh</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-embed"></span>
</div>
<span>vjs-icon-embed</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-setting-youtube"></span>
</div>
<span>vjs-icon-setting-youtube</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-v2_fullscreen"></span>
</div>
<span>vjs-icon-v2_fullscreen</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-v2_loading"></span>
</div>
<span>vjs-icon-v2_loading</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-v2_pause"></span>
</div>
<span>vjs-icon-v2_pause</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-v2_play"></span>
</div>
<span>vjs-icon-v2_play</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-v2_settings"></span>
</div>
<span>vjs-icon-v2_settings</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-v2_un-fullscreen"></span>
</div>
<span>vjs-icon-v2_un-fullscreen</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-v2_volume-20"></span>
</div>
<span>vjs-icon-v2_volume-20</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-v2_volume-50"></span>
</div>
<span>vjs-icon-v2_volume-50</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-v2_volume-max"></span>
</div>
<span>vjs-icon-v2_volume-max</span>
</div>
<div class="preview">
<div class="preview-icon">
<span class="vjs-icon-v2_volume-mute"></span>
</div>
<span>vjs-icon-v2_volume-mute</span>
</div>
</body>
</html>