www.aleph1.co.uk Git - yaffs-website/blob - node_modules/videojs-font/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="UTF-8">
   5         <title>VideoJS</title>
   6         <link href="css/videojs-icons.css" rel="stylesheet">
   7
   8   <style>
   9     body {
  10       text-align: center;
  11     }
  12
  13     header {
  14       /*text-align: center;*/
  15     }
  16
  17     .preview {
  18       display: inline-block;
  19       border: 1px solid #ccc;
  20       text-align: center;
  21       width: 150px;
  22       margin: 10px;
  23       padding: 10px;
  24     }
  25
  26     .preview-icon {
  27       width: 100%;
  28       font-size: 200%;
  29     }
  30   </style>
  31 </head>
  32 <body>
  33   <header>
  34            <h1>VideoJS Icons</h1>
  35      <p>All icons prefixed by <code>vjs-icon-</code></p>
  36    </header>
  37         <div class="preview">
  38                 <div class="preview-icon">
  39                         <span class="vjs-icon-play"></span>
  40                 </div>
  41                 <span>play</span>
  42         </div>
  43         <div class="preview">
  44                 <div class="preview-icon">
  45                         <span class="vjs-icon-play-circle"></span>
  46                 </div>
  47                 <span>play-circle</span>
  48         </div>
  49         <div class="preview">
  50                 <div class="preview-icon">
  51                         <span class="vjs-icon-pause"></span>
  52                 </div>
  53                 <span>pause</span>
  54         </div>
  55         <div class="preview">
  56                 <div class="preview-icon">
  57                         <span class="vjs-icon-volume-mute"></span>
  58                 </div>
  59                 <span>volume-mute</span>
  60         </div>
  61         <div class="preview">
  62                 <div class="preview-icon">
  63                         <span class="vjs-icon-volume-low"></span>
  64                 </div>
  65                 <span>volume-low</span>
  66         </div>
  67         <div class="preview">
  68                 <div class="preview-icon">
  69                         <span class="vjs-icon-volume-mid"></span>
  70                 </div>
  71                 <span>volume-mid</span>
  72         </div>
  73         <div class="preview">
  74                 <div class="preview-icon">
  75                         <span class="vjs-icon-volume-high"></span>
  76                 </div>
  77                 <span>volume-high</span>
  78         </div>
  79         <div class="preview">
  80                 <div class="preview-icon">
  81                         <span class="vjs-icon-fullscreen-enter"></span>
  82                 </div>
  83                 <span>fullscreen-enter</span>
  84         </div>
  85         <div class="preview">
  86                 <div class="preview-icon">
  87                         <span class="vjs-icon-fullscreen-exit"></span>
  88                 </div>
  89                 <span>fullscreen-exit</span>
  90         </div>
  91         <div class="preview">
  92                 <div class="preview-icon">
  93                         <span class="vjs-icon-square"></span>
  94                 </div>
  95                 <span>square</span>
  96         </div>
  97         <div class="preview">
  98                 <div class="preview-icon">
  99                         <span class="vjs-icon-spinner"></span>
 100                 </div>
 101                 <span>spinner</span>
 102         </div>
 103         <div class="preview">
 104                 <div class="preview-icon">
 105                         <span class="vjs-icon-subtitles"></span>
 106                 </div>
 107                 <span>subtitles</span>
 108         </div>
 109         <div class="preview">
 110                 <div class="preview-icon">
 111                         <span class="vjs-icon-captions"></span>
 112                 </div>
 113                 <span>captions</span>
 114         </div>
 115         <div class="preview">
 116                 <div class="preview-icon">
 117                         <span class="vjs-icon-chapters"></span>
 118                 </div>
 119                 <span>chapters</span>
 120         </div>
 121         <div class="preview">
 122                 <div class="preview-icon">
 123                         <span class="vjs-icon-share"></span>
 124                 </div>
 125                 <span>share</span>
 126         </div>
 127         <div class="preview">
 128                 <div class="preview-icon">
 129                         <span class="vjs-icon-cog"></span>
 130                 </div>
 131                 <span>cog</span>
 132         </div>
 133         <div class="preview">
 134                 <div class="preview-icon">
 135                         <span class="vjs-icon-circle"></span>
 136                 </div>
 137                 <span>circle</span>
 138         </div>
 139         <div class="preview">
 140                 <div class="preview-icon">
 141                         <span class="vjs-icon-circle-outline"></span>
 142                 </div>
 143                 <span>circle-outline</span>
 144         </div>
 145         <div class="preview">
 146                 <div class="preview-icon">
 147                         <span class="vjs-icon-circle-inner-circle"></span>
 148                 </div>
 149                 <span>circle-inner-circle</span>
 150         </div>
 151         <div class="preview">
 152                 <div class="preview-icon">
 153                         <span class="vjs-icon-hd"></span>
 154                 </div>
 155                 <span>hd</span>
 156         </div>
 157         <div class="preview">
 158                 <div class="preview-icon">
 159                         <span class="vjs-icon-cancel"></span>
 160                 </div>
 161                 <span>cancel</span>
 162         </div>
 163         <div class="preview">
 164                 <div class="preview-icon">
 165                         <span class="vjs-icon-replay"></span>
 166                 </div>
 167                 <span>replay</span>
 168         </div>
 169         <div class="preview">
 170                 <div class="preview-icon">
 171                         <span class="vjs-icon-facebook"></span>
 172                 </div>
 173                 <span>facebook</span>
 174         </div>
 175         <div class="preview">
 176                 <div class="preview-icon">
 177                         <span class="vjs-icon-gplus"></span>
 178                 </div>
 179                 <span>gplus</span>
 180         </div>
 181         <div class="preview">
 182                 <div class="preview-icon">
 183                         <span class="vjs-icon-linkedin"></span>
 184                 </div>
 185                 <span>linkedin</span>
 186         </div>
 187         <div class="preview">
 188                 <div class="preview-icon">
 189                         <span class="vjs-icon-twitter"></span>
 190                 </div>
 191                 <span>twitter</span>
 192         </div>
 193         <div class="preview">
 194                 <div class="preview-icon">
 195                         <span class="vjs-icon-tumblr"></span>
 196                 </div>
 197                 <span>tumblr</span>
 198         </div>
 199         <div class="preview">
 200                 <div class="preview-icon">
 201                         <span class="vjs-icon-pinterest"></span>
 202                 </div>
 203                 <span>pinterest</span>
 204         </div>
 205         <div class="preview">
 206                 <div class="preview-icon">
 207                         <span class="vjs-icon-audio-description"></span>
 208                 </div>
 209                 <span>audio-description</span>
 210         </div>
 211         <div class="preview">
 212                 <div class="preview-icon">
 213                         <span class="vjs-icon-audio"></span>
 214                 </div>
 215                 <span>audio</span>
 216         </div>
 217 </body>
 218 </html>