Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Lowercase wikifont class names, added wikifont inline-block class
Improved demo
- Loading branch information
Showing
2 changed files
with
275 additions
and
237 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,112 +1,137 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>WikiFont minimal code</title> | ||
| <link rel="stylesheet" href="font.css"> | ||
| </head> | ||
| <style> | ||
| i { | ||
| font-family: WikiFont-Regular; | ||
| font-size: 3em; | ||
| font-style: normal; | ||
| } | ||
| body { margin: 2% 20% 2% 20%;} | ||
| span { color: #999;} | ||
| hr { color: grey ;} | ||
| </style> | ||
| <body> | ||
| WikiFont icons and associated CSS class call. List is complete as of 2014.05.21.<br /> | ||
| </head> | ||
| <style> | ||
| body { | ||
| margin: 2% 20% 2% 20%; | ||
| color: #555; | ||
| font-family: sans-serif; | ||
| font-size: 1.25em; | ||
| } | ||
|
|
||
| hr { color: grey; } | ||
|
|
||
| h1,h5 { | ||
| margin: .5em 0 .25em; | ||
| } | ||
| div { | ||
| display: inline-block; | ||
| color: #777; | ||
| border-bottom: 2px solid #eee; | ||
| } | ||
| div:hover { | ||
| border-bottom-color: #cef; | ||
| } | ||
| span { | ||
| color: #111; | ||
| } | ||
| </style> | ||
| <body> | ||
| <h1>WikiFont icon set example CSS class usage</h1> | ||
| <h5>List is complete as of 2014.06.04</h5> | ||
| <hr> | ||
| <!-- ----------------------------- --> | ||
| <!-- EXTRACTED FROM FONT.CSS FILE :--> | ||
|
|
||
| <i class="WikiFont-magnifying-glass"></i> <span>WikiFont-magnifying-glass</span><br /> | ||
| <i class="WikiFont-arrow-left"></i> <span>WikiFont-arrow-left</span><br /> | ||
| <i class="WikiFont-tick"></i> <span>WikiFont-tick</span><br /> | ||
| <i class="WikiFont-x"></i> <span>WikiFont-x</span><br /> | ||
| <i class="WikiFont-x-circle"></i> <span>WikiFont-x-circle</span><br /> | ||
| <i class="WikiFont-unstar"></i> <span>WikiFont-unstar</span><br /> | ||
| <i class="WikiFont-star"></i> <span>WikiFont-star</span><br /> | ||
| <i class="WikiFont-sun"></i> <span>WikiFont-sun</span><br /> | ||
| <i class="WikiFont-star-circle"></i> <span>WikiFont-star-circle</span><br /> | ||
| <i class="WikiFont-funnel"></i> <span>WikiFont-funnel</span><br /> | ||
| <i class="WikiFont-eye"></i> <span>WikiFont-eye</span><br /> | ||
| <i class="WikiFont-eye-lid"></i> <span>WikiFont-eye-lid</span><br /> | ||
| <i class="WikiFont-bookmark"></i> <span>WikiFont-bookmark</span><br /> | ||
| <i class="WikiFont-printer"></i> <span>WikiFont-printer</span><br /> | ||
| <i class="WikiFont-puzzle"></i> <span>WikiFont-puzzle</span><br /> | ||
| <i class="WikiFont-clock"></i> <span>WikiFont-clock</span><br /> | ||
| <i class="WikiFont-dice"></i> <span>WikiFont-dice</span><br /> | ||
| <i class="WikiFont-move"></i> <span>WikiFont-move</span><br /> | ||
| <i class="WikiFont-gear"></i> <span>WikiFont-gear</span><br /> | ||
| <i class="WikiFont-ellipsis"></i> <span>WikiFont-ellipsis</span><br /> | ||
| <i class="WikiFont-envelope"></i> <span>WikiFont-envelope</span><br /> | ||
| <i class="WikiFont-pin"></i> <span>WikiFont-pin</span><br /> | ||
| <i class="WikiFont-caret"></i> <span>WikiFont-caret</span><br /> | ||
| <i class="WikiFont-download"></i> <span>WikiFont-download</span><br /> | ||
| <!-- ----------------------------- --> | ||
| <!-- EXTRACTED FROM FONT.CSS FILE :--> | ||
|
|
||
|
|
||
| <h3>/* UI ELEMENTS e000-023 */</h3> | ||
| <div><span class="wikifont wikifont-magnifying-glass"></span> wikifont-magnifying-glass</div> | ||
| <div><span class="wikifont wikifont-arrow-left"></span> wikifont-arrow-left</div> | ||
| <div><span class="wikifont wikifont-tick"></span> wikifont-tick</div> | ||
| <div><span class="wikifont wikifont-x"></span> wikifont-x</div> | ||
| <div><span class="wikifont wikifont-x-circle"></span> wikifont-x-circle</div> | ||
| <div><span class="wikifont wikifont-unstar"></span> wikifont-unstar</div> | ||
| <div><span class="wikifont wikifont-star"></span> wikifont-star</div> | ||
| <div><span class="wikifont wikifont-star-list"></span> wikifont-star-list</div> | ||
| <div><span class="wikifont wikifont-sun"></span> wikifont-sun</div> | ||
| <div><span class="wikifont wikifont-star-circle"></span> wikifont-star-circle</div> | ||
| <div><span class="wikifont wikifont-eye"></span> wikifont-eye</div> | ||
| <div><span class="wikifont wikifont-eye-lid"></span> wikifont-eye-lid</div> | ||
| <div><span class="wikifont wikifont-bookmark"></span> wikifont-bookmark</div> | ||
| <div><span class="wikifont wikifont-printer"></span> wikifont-printer</div> | ||
| <div><span class="wikifont wikifont-puzzle"></span> wikifont-puzzle</div> | ||
| <div><span class="wikifont wikifont-clock"></span> wikifont-clock</div> | ||
| <div><span class="wikifont wikifont-dice"></span> wikifont-dice</div> | ||
| <div><span class="wikifont wikifont-move"></span> wikifont-move</div> | ||
| <div><span class="wikifont wikifont-gear"></span> wikifont-gear</div> | ||
| <div><span class="wikifont wikifont-ellipsis"></span> wikifont-ellipsis</div> | ||
| <div><span class="wikifont wikifont-envelope"></span> wikifont-envelope</div> | ||
| <div><span class="wikifont wikifont-pin"></span> wikifont-pin</div> | ||
| <div><span class="wikifont wikifont-funnel"></span> wikifont-funnel</div> | ||
| <div><span class="wikifont wikifont-download"></span> wikifont-download</div> | ||
| <div><span class="wikifont wikifont-bell"></span> wikifont-bell</div> | ||
| <div><span class="wikifont wikifont-bell-ring"></span> wikifont-bell-ring</div> | ||
| <div><span class="wikifont wikifont-caret-left"></span> wikifont-caret-left</div> | ||
| <div><span class="wikifont wikifont-caret-down"></span> wikifont-caret-down</div> | ||
|
|
||
|
|
||
| <h3>/* STRIPES e040-043 */</h3> | ||
| <i class="WikiFont-stripe-compact"></i> <span>WikiFont-stripe-compact</span><br /> | ||
| <i class="WikiFont-stripe-toc"></i> <span>WikiFont-stripe-toc</span><br /> | ||
| <i class="WikiFont-stripe-expanded"></i> <span>WikiFont-stripe-expanded</span><br /> | ||
| <div><span class="wikifont wikifont-stripe-compact"></span> wikifont-stripe-compact</div> | ||
| <div><span class="wikifont wikifont-stripe-toc"></span> wikifont-stripe-toc</div> | ||
| <div><span class="wikifont wikifont-stripe-expanded"></span> wikifont-stripe-expanded</div> | ||
|
|
||
|
|
||
| <h3>/* WIKIPEDIA LOGO e400-401 */</h3> | ||
| <i class="WikiFont-w"></i> <span>WikiFont-w</span><br /> | ||
| <div><span class="wikifont wikifont-w"></span> wikifont-w</div> | ||
|
|
||
|
|
||
| <h3>/* UI MODERATION ELEMENTS e500-508 */</h3> | ||
|
|
||
| <i class="WikiFont-article"></i> <span>WikiFont-article</span><br /> | ||
| <i class="WikiFont-article-check"></i> <span>WikiFont-article-check</span><br /> | ||
| <i class="WikiFont-article-search"></i> <span>WikiFont-article-search</span><br /> | ||
|
|
||
| <i class="WikiFont-trash"></i> <span>WikiFont-trash</span><br /> | ||
| <i class="WikiFont-trash-slash"></i> <span>WikiFont-trash-slash</span><br /> | ||
| <i class="WikiFont-block"></i> <span>WikiFont-block</span><br /> | ||
| <i class="WikiFont-block-slash"></i> <span>WikiFont-block-slash</span><br /> | ||
| <i class="WikiFont-flag"></i> <span>WikiFont-flag</span><br /> | ||
| <i class="WikiFont-flag-slash"></i> <span>WikiFont-flag-slash</span><br /> | ||
| <i class="WikiFont-play"></i> <span>WikiFont-play</span><br /> | ||
| <i class="WikiFont-stop"></i> <span>WikiFont-stop</span><br /> | ||
| <i class="WikiFont-lock"></i> <span>WikiFont-lock</span><br /> | ||
| <div><span class="wikifont wikifont-article"></span> wikifont-article</div> | ||
| <div><span class="wikifont wikifont-article-check"></span> wikifont-article-check</div> | ||
| <div><span class="wikifont wikifont-article-search"></span> wikifont-article-search</div> | ||
| <div><span class="wikifont wikifont-trash"></span> wikifont-trash</div> | ||
| <div><span class="wikifont wikifont-trash-slash"></span> wikifont-trash-slash</div> | ||
| <div><span class="wikifont wikifont-block"></span> wikifont-block</div> | ||
| <div><span class="wikifont wikifont-block-slash"></span> wikifont-block-slash</div> | ||
| <div><span class="wikifont wikifont-flag"></span> wikifont-flag</div> | ||
| <div><span class="wikifont wikifont-flag-slash"></span> wikifont-flag-slash</div> | ||
| <div><span class="wikifont wikifont-play"></span> wikifont-play</div> | ||
| <div><span class="wikifont wikifont-stop"></span> wikifont-stop</div> | ||
| <div><span class="wikifont wikifont-lock"></span> wikifont-lock</div> | ||
|
|
||
|
|
||
| <h3>/* USER e600-602 */</h3> | ||
| <i class="WikiFont-user-bust"></i> <span>WikiFont-user-bust</span><br /> | ||
| <i class="WikiFont-user-smile"></i> <span>WikiFont-user-smile</span><br /> | ||
| <i class="WikiFont-user-sleep"></i> <span>WikiFont-user-sleep</span><br /> | ||
| <div><span class="wikifont wikifont-user-bust"></span> wikifont-user-bust</div> | ||
| <div><span class="wikifont wikifont-user-smile"></span> wikifont-user-smile</div> | ||
| <div><span class="wikifont wikifont-user-sleep"></span> wikifont-user-sleep</div> | ||
|
|
||
|
|
||
| <h3>/* TRANSLATION e700 */</h3> | ||
| <i class="WikiFont-translate"></i> <span>WikiFont-translate</span><br /> | ||
| <div><span class="wikifont wikifont-translate"></span> wikifont-translate</div> | ||
|
|
||
|
|
||
| <h3>/* CONTRIBUTION e800-845 */</h3> | ||
| <i class="WikiFont-pencil"></i> <span>WikiFont-pencil</span><br /> | ||
| <i class="WikiFont-pencil-revert"></i> <span>WikiFont-pencil-revert</span><br /> | ||
| <i class="WikiFont-pencil-lock"></i> <span>WikiFont-pencil-lock</span><br /> | ||
|
|
||
| <i class="WikiFont-speech-bubble"></i> <span>WikiFont-speech-bubble</span><br /> | ||
| <i class="WikiFont-speech-bubbles"></i> <span>WikiFont-speech-bubbles</span><br /> | ||
| <i class="WikiFont-speech-bubble-add"></i> <span>WikiFont-speech-bubble-add</span><br /> | ||
| <i class="WikiFont-speech-bubble-smile"></i> <span>WikiFont-speech-bubble-smile</span><br /> | ||
|
|
||
| <i class="WikiFont-link"></i> <span>WikiFont-link</span><br /> | ||
|
|
||
| <i class="WikiFont-quotes"></i> <span>WikiFont-quotes</span><br /> | ||
| <i class="WikiFont-quotes-add"></i> <span>WikiFont-quotes-add</span><br /> | ||
|
|
||
| <i class="WikiFont-image"></i> <span>WikiFont-image</span><br /> | ||
| <i class="WikiFont-image-lock"></i> <span>WikiFont-image-lock</span><br /> | ||
| <i class="WikiFont-image-add"></i> <span>WikiFont-image-add</span><br /> | ||
| <i class="WikiFont-image-main-placeholder"></i> <span>WikiFont-image-main-placeholder</span><br /> | ||
| <i class="WikiFont-folder"></i> <span>WikiFont-folder</span><br /> | ||
| <i class="WikiFont-folder-main-placeholder"></i> <span>WikiFont-folder-main-placeholder</span><br /> | ||
| <div><span class="wikifont wikifont-pencil"></span> wikifont-pencil</div> | ||
| <div><span class="wikifont wikifont-pencil-revert-full"></span> wikifont-pencil-revert-full</div> | ||
| <div><span class="wikifont wikifont-pencil-revert-pt1"></span> wikifont-pencil-revert-pt1</div> | ||
| <div><span class="wikifont wikifont-pencil-revert-pt2"></span> wikifont-pencil-revert-pt2</div> | ||
| <div><span class="wikifont wikifont-pencil-lock-full"></span> wikifont-pencil-lock-full</div> | ||
| <div><span class="wikifont wikifont-pencil-lock-pt1"></span> wikifont-pencil-lock-pt1</div> | ||
| <div><span class="wikifont wikifont-pencil-lock-pt2"></span> wikifont-pencil-lock-pt2</div> | ||
| <div><span class="wikifont wikifont-speech-bubble"></span> wikifont-speech-bubble</div> | ||
| <div><span class="wikifont wikifont-speech-bubbles"></span> wikifont-speech-bubbles</div> | ||
| <div><span class="wikifont wikifont-speech-bubble-add"></span> wikifont-speech-bubble-add</div> | ||
| <div><span class="wikifont wikifont-speech-bubble-smile"></span> wikifont-speech-bubble-smile</div> | ||
| <div><span class="wikifont wikifont-link"></span> wikifont-link</div> | ||
| <div><span class="wikifont wikifont-quotes"></span> wikifont-quotes</div> | ||
| <div><span class="wikifont wikifont-quotes-add"></span> wikifont-quotes-add</div> | ||
| <div><span class="wikifont wikifont-image"></span> wikifont-image</div> | ||
| <div><span class="wikifont wikifont-image-lock-full"></span> wikifont-image-lock-full</div> | ||
| <div><span class="wikifont wikifont-image-lock-pt1"></span> wikifont-image-lock-pt1</div> | ||
| <div><span class="wikifont wikifont-image-lock-pt2"></span> wikifont-image-lock-pt2</div> | ||
| <div><span class="wikifont wikifont-image-add-full"></span> wikifont-image-add-full</div> | ||
| <div><span class="wikifont wikifont-image-add-pt1"></span> wikifont-image-add-pt1</div> | ||
| <div><span class="wikifont wikifont-image-add-pt2"></span> wikifont-image-add-pt2</div> | ||
| <div><span class="wikifont wikifont-image-main-placeholder"></span> wikifont-image-main-placeholder</div> | ||
| <div><span class="wikifont wikifont-folder"></span> wikifont-folder</div> | ||
| <div><span class="wikifont wikifont-folder-main-placeholder"></span> wikifont-folder-main-placeholder</div> | ||
|
|
||
|
|
||
| <h3>/* WIKI-X e900 */</h3> | ||
| <i class="WikiFont-wikitrail"></i> <span>WikiFont-wikitrail</span><br /> | ||
| </body> | ||
| <div><span class="wikifont wikifont-wikitrail"></span> wikifont-wikitrail</div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.