WordPress.org
Get WordPress

Making WordPress.org

Ticket #252: dev-dashicons.diff

File dev-dashicons.diff, 26.7 KB (added by ryelle, 9 years ago)

  • inc/template-tags.php 

    diff --git inc/template-tags.php inc/template-tags.php
old mode 100755
new mode 100644
index ae5eecc..309c41d
    namespace DevHub { 
    354354        function get_site_section_title() {
    355355                $parts = explode( '/', $_SERVER['REQUEST_URI'] );
    356356                switch ( $parts[1] ) {
     357                        case 'resources':
     358                                return sprintf( __( 'Developer Resources: %s', 'wporg' ), get_the_title() );
    357359                        case 'reference':
    358360                                return __( 'Code Reference', 'wporg' );
    359361                        case 'plugin':

  • new file js/page-dashicons.js 

    diff --git js/page-dashicons.js js/page-dashicons.js
new file mode 100644
index 0000000..de98768
    - +  
     1(function( wp, $, window, undefined ) {
     2
     3        var dashicons = {
     4                copy: function( text, copyMode ) {
     5                        if ( copyMode == "css" ) {
     6                                window.prompt( "Copy this, then paste in your CSS :before selector.", text );
     7                        } else if ( copyMode == "html" ) {
     8                                window.prompt( "Copy this, then paste in your HTML.", text );
     9                        } else {
     10                                window.prompt( "Copy this, then paste in your Photoshop textfield.", text );
     11                        }
     12                },
     13
     14                random: function() {
     15                        var divs = jQuery("#iconlist div").get().sort(function(){
     16                                        return Math.round(Math.random())-0.5;
     17                                }).slice(0,1);
     18
     19                        attr = jQuery(divs).attr('alt');
     20                        cssClass = jQuery(divs).attr('class');
     21                        dashicons.display( attr, cssClass );
     22                },
     23
     24                display: function( attr, cssClass ){
     25                        // set permalink
     26                        var permalink = cssClass.split(' dashicons-')[1];
     27                        window.location.hash = permalink;
     28
     29                        // html copy string
     30                        htmltext = '<span class="' + cssClass + '"></span>';
     31
     32                        // glyph copy string
     33                        glyphtemp = "&#x" + attr + ";";
     34                        jQuery('#temp').html( glyphtemp );
     35                        glyphtext = jQuery('#temp').text();
     36
     37                        var tmpl = wp.template( 'glyphs' );
     38
     39                        jQuery( '#glyph' ).html( tmpl({
     40                                cssClass: cssClass,
     41                                attr: attr,
     42                                html: htmltext,
     43                                glyph: glyphtext
     44                        }) );
     45
     46                        $(window).scrollTop(0);
     47                }
     48        };
     49
     50        window.dashicons = dashicons;
     51
     52        jQuery(document).ready(function() {
     53
     54                // pick random icon if no permalink, otherwise go to permalink
     55                if ( window.location.hash ) {
     56                        permalink = "dashicons-" + window.location.hash.split('#')[1];
     57
     58                        // sanitize
     59                        if ( !/^dashicons-[a-z-]+$/.test( permalink ) ) {
     60                                permalink = "";
     61                                dashicons.random();
     62                        }
     63
     64                        attr = jQuery( '.' + permalink ).attr( 'alt' );
     65                        cssClass = jQuery( '.' + permalink ).attr('class');
     66                        dashicons.display( attr, cssClass );
     67                } else {
     68                        dashicons.random();
     69                }
     70
     71                jQuery( '#iconlist div' ).click(function() {
     72
     73                        attr = jQuery( this ).attr( 'alt' );
     74                        cssClass = jQuery( this ).attr( 'class' );
     75
     76                        dashicons.display( attr, cssClass );
     77
     78                });
     79
     80                var $rows = jQuery('#iconlist div');
     81                jQuery('#search').keyup(function() {
     82
     83                        // remove update text when using search
     84                        jQuery('body').addClass('searching');
     85
     86                        var val = jQuery.trim(jQuery(this).val()).replace(/ +/g, ' ').toLowerCase();
     87
     88                        if ( val == '' ) {
     89                                jQuery('body').removeClass('searching');
     90                        }
     91
     92                        $rows.show().filter(function() {
     93                                var text = jQuery(this).text().replace(/\s+/g, ' ').toLowerCase();
     94                                return !~text.indexOf(val);
     95                        }).hide();
     96                });
     97
     98        });
     99
     100})( wp, jQuery, window );

  • new file page-dashicons.php 

    diff --git page-dashicons.php page-dashicons.php
new file mode 100644
index 0000000..0e78be8
    - +  
     1<?php
     2/**
     3 * The template for displaying the Dashicons resource page
     4 *
     5 * Template Name: Dashicons Resource
     6 *
     7 * @package wporg-developer
     8 */
     9
     10wp_enqueue_style(  'dashicons-page', get_template_directory_uri() . '/stylesheets/page-dashicons.css' );
     11wp_enqueue_script( 'dashicons-page', get_template_directory_uri() . '/js/page-dashicons.js', array('jquery','wp-util') );
     12
     13get_header(); ?>
     14
     15        <div id="content-area" <?php body_class( 'dashicons-page' ); ?>>
     16                <?php while ( have_posts() ) : the_post(); ?>
     17                <main id="main" <?php post_class( 'site-main' ); ?> role="main">
     18
     19                        <div class="details clear">
     20                                <div id="glyph"></div>
     21
     22                                <div class="entry-content">
     23                                        <?php the_content(); ?>
     24                                </div><!-- .entry-content -->
     25
     26                                <div class="icon-filter">
     27                                        <input placeholder="Filter..." name="search" id="search" type="text" value="" maxlength="150">
     28                                </div>
     29
     30                        </div>
     31
     32                        <div id="icons">
     33                                <div id="iconlist">
     34
     35                                        <h4>Admin Menu</h4>
     36
     37                                        <!-- admin menu -->
     38                                        <div alt="f333" class="dashicons dashicons-menu">menu</div>
     39                                        <div alt="f319" class="dashicons dashicons-admin-site">site</div>
     40                                        <div alt="f226" class="dashicons dashicons-dashboard">dashboard</div>
     41                                        <div alt="f109" class="dashicons dashicons-admin-post">post</div>
     42                                        <div alt="f104" class="dashicons dashicons-admin-media">media</div>
     43                                        <div alt="f103" class="dashicons dashicons-admin-links">links</div>
     44                                        <div alt="f105" class="dashicons dashicons-admin-page">page</div>
     45                                        <div alt="f101" class="dashicons dashicons-admin-comments">comments</div>
     46                                        <div alt="f100" class="dashicons dashicons-admin-appearance">appearance</div>
     47                                        <div alt="f106" class="dashicons dashicons-admin-plugins">plugins</div>
     48                                        <div alt="f110" class="dashicons dashicons-admin-users">users</div>
     49                                        <div alt="f107" class="dashicons dashicons-admin-tools">tools</div>
     50                                        <div alt="f108" class="dashicons dashicons-admin-settings">settings</div>
     51                                        <div alt="f112" class="dashicons dashicons-admin-network">network</div>
     52                                        <div alt="f102" class="dashicons dashicons-admin-home">home</div>
     53                                        <div alt="f111" class="dashicons dashicons-admin-generic">generic</div>
     54                                        <div alt="f148" class="dashicons dashicons-admin-collapse">collapse</div>
     55
     56                                        <h4>Welcome Screen</h4>
     57
     58                                        <!-- welcome screen -->
     59                                        <div alt="f119" class="dashicons dashicons-welcome-write-blog">write blog</div>
     60                                        <!--<div alt="f119" class="dashicons dashicons-welcome-edit-page"></div> Duplicate -->
     61                                        <div alt="f133" class="dashicons dashicons-welcome-add-page">add page</div>
     62                                        <div alt="f115" class="dashicons dashicons-welcome-view-site">view site</div>
     63                                        <div alt="f116" class="dashicons dashicons-welcome-widgets-menus">widgets and menus</div>
     64                                        <div alt="f117" class="dashicons dashicons-welcome-comments">comments</div>
     65                                        <div alt="f118" class="dashicons dashicons-welcome-learn-more">learn more</div>
     66
     67                                        <h4>Post Formats</h4>
     68
     69                                        <!-- post formats -->
     70                                        <!--<div alt="f109" class="dashicons dashicons-format-standard"></div> Duplicate -->
     71                                        <div alt="f123" class="dashicons dashicons-format-aside">aside</div>
     72                                        <div alt="f128" class="dashicons dashicons-format-image">image</div>
     73                                        <div alt="f161" class="dashicons dashicons-format-gallery">gallery</div>
     74                                        <div alt="f126" class="dashicons dashicons-format-video">video</div>
     75                                        <div alt="f130" class="dashicons dashicons-format-status">status</div>
     76                                        <div alt="f122" class="dashicons dashicons-format-quote">quote</div>
     77                                        <!--<div alt="f103" class="dashicons dashicons-format-links">links</div> Duplicate -->
     78                                        <div alt="f125" class="dashicons dashicons-format-chat">chat</div>
     79                                        <div alt="f127" class="dashicons dashicons-format-audio">audio</div>
     80                                        <div alt="f306" class="dashicons dashicons-camera">camera</div>
     81                                        <div alt="f232" class="dashicons dashicons-images-alt">images (alt)</div>
     82                                        <div alt="f233" class="dashicons dashicons-images-alt2">images (alt 2)</div>
     83                                        <div alt="f234" class="dashicons dashicons-video-alt">video (alt)</div>
     84                                        <div alt="f235" class="dashicons dashicons-video-alt2">video (alt 2)</div>
     85                                        <div alt="f236" class="dashicons dashicons-video-alt3">video (alt 3)</div>
     86
     87                                        <h4>Media</h4>
     88
     89                                        <!-- media -->
     90                                        <div alt="f501" class="dashicons dashicons-media-archive">archive</div>
     91                                        <div alt="f500" class="dashicons dashicons-media-audio">audio</div>
     92                                        <div alt="f499" class="dashicons dashicons-media-code">code</div>
     93                                        <div alt="f498" class="dashicons dashicons-media-default">default</div>
     94                                        <div alt="f497" class="dashicons dashicons-media-document">document</div>
     95                                        <div alt="f496" class="dashicons dashicons-media-interactive">interactive</div>
     96                                        <div alt="f495" class="dashicons dashicons-media-spreadsheet">spreadsheet</div>
     97                                        <div alt="f491" class="dashicons dashicons-media-text">text</div>
     98                                        <div alt="f490" class="dashicons dashicons-media-video">video</div>
     99                                        <div alt="f492" class="dashicons dashicons-playlist-audio">audio playlist</div>
     100                                        <div alt="f493" class="dashicons dashicons-playlist-video">video playlist</div>
     101
     102                                        <h4>Image Editing</h4>
     103
     104                                        <!-- image editing -->
     105                                        <div alt="f165" class="dashicons dashicons-image-crop">crop</div>
     106                                        <div alt="f166" class="dashicons dashicons-image-rotate-left">rotate left</div>
     107                                        <div alt="f167" class="dashicons dashicons-image-rotate-right">rotate right</div>
     108                                        <div alt="f168" class="dashicons dashicons-image-flip-vertical">flip vertical</div>
     109                                        <div alt="f169" class="dashicons dashicons-image-flip-horizontal">flip horizontal</div>
     110                                        <div alt="f171" class="dashicons dashicons-undo">undo</div>
     111                                        <div alt="f172" class="dashicons dashicons-redo">redo</div>
     112
     113                                        <h4>TinyMCE</h4>
     114
     115                                        <!-- tinymce -->
     116                                        <div alt="f200" class="dashicons dashicons-editor-bold">bold</div>
     117                                        <div alt="f201" class="dashicons dashicons-editor-italic">italic</div>
     118                                        <div alt="f203" class="dashicons dashicons-editor-ul">ul</div>
     119                                        <div alt="f204" class="dashicons dashicons-editor-ol">ol</div>
     120                                        <div alt="f205" class="dashicons dashicons-editor-quote">quote</div>
     121                                        <div alt="f206" class="dashicons dashicons-editor-alignleft">alignleft</div>
     122                                        <div alt="f207" class="dashicons dashicons-editor-aligncenter">aligncenter</div>
     123                                        <div alt="f208" class="dashicons dashicons-editor-alignright">alignright</div>
     124                                        <div alt="f209" class="dashicons dashicons-editor-insertmore">insertmore</div>
     125                                        <div alt="f210" class="dashicons dashicons-editor-spellcheck">spellcheck</div>
     126                                        <!-- <div alt="f211" class="dashicons dashicons-editor-distractionfree"></div> Duplicate -->
     127                                        <div alt="f211" class="dashicons dashicons-editor-expand">expand</div>
     128                                        <div alt="f506" class="dashicons dashicons-editor-contract">contract</div>
     129                                        <div alt="f212" class="dashicons dashicons-editor-kitchensink">kitchen sink</div>
     130                                        <div alt="f213" class="dashicons dashicons-editor-underline">underline</div>
     131                                        <div alt="f214" class="dashicons dashicons-editor-justify">justify</div>
     132                                        <div alt="f215" class="dashicons dashicons-editor-textcolor">textcolor</div>
     133                                        <div alt="f216" class="dashicons dashicons-editor-paste-word">paste</div>
     134                                        <div alt="f217" class="dashicons dashicons-editor-paste-text">paste</div>
     135                                        <div alt="f218" class="dashicons dashicons-editor-removeformatting">remove formatting</div>
     136                                        <div alt="f219" class="dashicons dashicons-editor-video">video</div>
     137                                        <div alt="f220" class="dashicons dashicons-editor-customchar">custom chararcter</div>
     138                                        <div alt="f221" class="dashicons dashicons-editor-outdent">outdent</div>
     139                                        <div alt="f222" class="dashicons dashicons-editor-indent">indent</div>
     140                                        <div alt="f223" class="dashicons dashicons-editor-help">help</div>
     141                                        <div alt="f224" class="dashicons dashicons-editor-strikethrough">strikethrough</div>
     142                                        <div alt="f225" class="dashicons dashicons-editor-unlink">unlink</div>
     143                                        <div alt="f320" class="dashicons dashicons-editor-rtl">rtl</div>
     144                                        <div alt="f474" class="dashicons dashicons-editor-break">break</div>
     145                                        <div alt="f475" class="dashicons dashicons-editor-code">code</div>
     146                                        <div alt="f476" class="dashicons dashicons-editor-paragraph">paragraph</div>
     147
     148                                        <h4>Posts Screen</h4>
     149
     150                                        <!-- posts -->
     151                                        <div alt="f135" class="dashicons dashicons-align-left">align left</div>
     152                                        <div alt="f136" class="dashicons dashicons-align-right">align right</div>
     153                                        <div alt="f134" class="dashicons dashicons-align-center">align center</div>
     154                                        <div alt="f138" class="dashicons dashicons-align-none">align none</div>
     155                                        <div alt="f160" class="dashicons dashicons-lock">lock</div>
     156                                        <div alt="f145" class="dashicons dashicons-calendar">calendar</div>
     157                                        <div alt="f177" class="dashicons dashicons-visibility">visibility</div>
     158                                        <div alt="f173" class="dashicons dashicons-post-status">post status</div>
     159                                        <div alt="f464" class="dashicons dashicons-edit">edit</div>
     160                                        <div alt="f182" class="dashicons dashicons-trash">trash</div>
     161
     162                                        <h4>Sorting</h4>
     163
     164                                        <!-- sorting -->
     165                                        <div alt="f504" class="dashicons dashicons-external">external</div>
     166                                        <div alt="f142" class="dashicons dashicons-arrow-up">arrow-up</div>
     167                                        <div alt="f140" class="dashicons dashicons-arrow-down">arrow-down</div>
     168                                        <div alt="f139" class="dashicons dashicons-arrow-right">arrow-right</div>
     169                                        <div alt="f141" class="dashicons dashicons-arrow-left">arrow-left</div>
     170                                        <div alt="f342" class="dashicons dashicons-arrow-up-alt">arrow-up</div>
     171                                        <div alt="f346" class="dashicons dashicons-arrow-down-alt">arrow-down</div>
     172                                        <div alt="f344" class="dashicons dashicons-arrow-right-alt">arrow-right</div>
     173                                        <div alt="f340" class="dashicons dashicons-arrow-left-alt">arrow-left</div>
     174                                        <div alt="f343" class="dashicons dashicons-arrow-up-alt2">arrow-up</div>
     175                                        <div alt="f347" class="dashicons dashicons-arrow-down-alt2">arrow-down</div>
     176                                        <div alt="f345" class="dashicons dashicons-arrow-right-alt2">arrow-right</div>
     177                                        <div alt="f341" class="dashicons dashicons-arrow-left-alt2">arrow-left</div>
     178                                        <div alt="f156" class="dashicons dashicons-sort">sort</div>
     179                                        <div alt="f229" class="dashicons dashicons-leftright">left right</div>
     180                                        <div alt="f503" class="dashicons dashicons-randomize">randomize</div>
     181                                        <div alt="f163" class="dashicons dashicons-list-view">list view</div>
     182                                        <div alt="f164" class="dashicons dashicons-exerpt-view">exerpt view</div>
     183
     184                                        <h4>Social</h4>
     185
     186                                        <!-- social -->
     187                                        <div alt="f237" class="dashicons dashicons-share">share</div>
     188                                        <div alt="f240" class="dashicons dashicons-share-alt">share</div>
     189                                        <div alt="f242" class="dashicons dashicons-share-alt2">share</div>
     190                                        <div alt="f301" class="dashicons dashicons-twitter">twitter</div>
     191                                        <div alt="f303" class="dashicons dashicons-rss">rss</div>
     192                                        <div alt="f465" class="dashicons dashicons-email">email</div>
     193                                        <div alt="f466" class="dashicons dashicons-email-alt">email</div>
     194                                        <div alt="f304" class="dashicons dashicons-facebook">facebook</div>
     195                                        <div alt="f305" class="dashicons dashicons-facebook-alt">facebook</div>
     196                                        <div alt="f462" class="dashicons dashicons-googleplus">googleplus</div>
     197                                        <div alt="f325" class="dashicons dashicons-networking">networking</div>
     198
     199                                        <h4>WordPress.org Specific: Jobs, Profiles, WordCamps</h4>
     200
     201                                        <!-- WPorg specific icons: Jobs, Profiles, WordCamps -->
     202                                        <div alt="f308" class="dashicons dashicons-hammer">hammer</div>
     203                                        <div alt="f309" class="dashicons dashicons-art">art</div>
     204                                        <div alt="f310" class="dashicons dashicons-migrate">migrate</div>
     205                                        <div alt="f311" class="dashicons dashicons-performance">performance</div>
     206                                        <div alt="f483" class="dashicons dashicons-universal-access">universal access</div>
     207                                        <div alt="f507" class="dashicons dashicons-universal-access-alt">universal access (alt)</div>
     208                                        <div alt="f486" class="dashicons dashicons-tickets">tickets</div>
     209                                        <div alt="f484" class="dashicons dashicons-nametag">nametag</div>
     210                                        <div alt="f481" class="dashicons dashicons-clipboard">clipboard</div>
     211                                        <div alt="f487" class="dashicons dashicons-heart">heart</div>
     212                                        <div alt="f488" class="dashicons dashicons-megaphone">megaphone</div>
     213                                        <div alt="f489" class="dashicons dashicons-schedule">schedule</div>
     214
     215                                        <h4>Products</h4>
     216
     217                                        <!-- internal/products -->
     218                                        <div alt="f120" class="dashicons dashicons-wordpress">wordpress</div>
     219                                        <div alt="f324" class="dashicons dashicons-wordpress-alt">wordpress</div>
     220                                        <div alt="f157" class="dashicons dashicons-pressthis">press this</div>
     221                                        <div alt="f463" class="dashicons dashicons-update">update</div>
     222                                        <div alt="f180" class="dashicons dashicons-screenoptions">screenoptions</div>
     223                                        <div alt="f348" class="dashicons dashicons-info">info</div>
     224                                        <div alt="f174" class="dashicons dashicons-cart">cart</div>
     225                                        <div alt="f175" class="dashicons dashicons-feedback">feedback</div>
     226                                        <div alt="f176" class="dashicons dashicons-cloud">cloud</div>
     227                                        <div alt="f326" class="dashicons dashicons-translation">translation</div>
     228
     229                                        <h4>Taxonomies</h4>
     230
     231                                        <!-- taxonomies -->
     232                                        <div alt="f323" class="dashicons dashicons-tag">tag</div>
     233                                        <div alt="f318" class="dashicons dashicons-category">category</div>
     234
     235                                        <h4>Widgets</h4>
     236
     237                                        <!-- widgets -->
     238                                        <div alt="f480" class="dashicons dashicons-archive">archive</div>
     239                                        <div alt="f479" class="dashicons dashicons-tagcloud">tagcloud</div>
     240                                        <div alt="f478" class="dashicons dashicons-text">text</div>
     241
     242                                        <h4>Notifications</h4>
     243
     244                                        <!-- alerts/notifications/flags -->
     245                                        <div alt="f147" class="dashicons dashicons-yes">yes</div>
     246                                        <div alt="f158" class="dashicons dashicons-no">no</div>
     247                                        <div alt="f335" class="dashicons dashicons-no-alt">no</div>
     248                                        <div alt="f132" class="dashicons dashicons-plus">plus</div>
     249                                        <div alt="f502" class="dashicons dashicons-plus-alt">plus</div>
     250                                        <div alt="f460" class="dashicons dashicons-minus">minus</div>
     251                                        <div alt="f153" class="dashicons dashicons-dismiss">dismiss</div>
     252                                        <div alt="f159" class="dashicons dashicons-marker">marker</div>
     253                                        <div alt="f155" class="dashicons dashicons-star-filled">filled star</div>
     254                                        <div alt="f459" class="dashicons dashicons-star-half">half star</div>
     255                                        <div alt="f154" class="dashicons dashicons-star-empty">empty star</div>
     256                                        <div alt="f227" class="dashicons dashicons-flag">flag</div>
     257
     258                                        <h4>Misc</h4>
     259
     260                                        <!-- misc/cpt -->
     261                                        <div alt="f230" class="dashicons dashicons-location">location</div>
     262                                        <div alt="f231" class="dashicons dashicons-location-alt">location</div>
     263                                        <div alt="f178" class="dashicons dashicons-vault">vault</div>
     264                                        <div alt="f332" class="dashicons dashicons-shield">shield</div>
     265                                        <div alt="f334" class="dashicons dashicons-shield-alt">shield</div>
     266                                        <div alt="f468" class="dashicons dashicons-sos">sos</div>
     267                                        <div alt="f179" class="dashicons dashicons-search">search</div>
     268                                        <div alt="f181" class="dashicons dashicons-slides">slides</div>
     269                                        <div alt="f183" class="dashicons dashicons-analytics">analytics</div>
     270                                        <div alt="f184" class="dashicons dashicons-chart-pie">pie chart</div>
     271                                        <div alt="f185" class="dashicons dashicons-chart-bar">bar chart</div>
     272                                        <div alt="f238" class="dashicons dashicons-chart-line">line chart</div>
     273                                        <div alt="f239" class="dashicons dashicons-chart-area">area chart</div>
     274                                        <div alt="f307" class="dashicons dashicons-groups">groups</div>
     275                                        <div alt="f338" class="dashicons dashicons-businessman">businessman</div>
     276                                        <div alt="f336" class="dashicons dashicons-id">id</div>
     277                                        <div alt="f337" class="dashicons dashicons-id-alt">id</div>
     278                                        <div alt="f312" class="dashicons dashicons-products">products</div>
     279                                        <div alt="f313" class="dashicons dashicons-awards">awards</div>
     280                                        <div alt="f314" class="dashicons dashicons-forms">forms</div>
     281                                        <div alt="f473" class="dashicons dashicons-testimonial">testimonial</div>
     282                                        <div alt="f322" class="dashicons dashicons-portfolio">portfolio</div>
     283                                        <div alt="f330" class="dashicons dashicons-book">book</div>
     284                                        <div alt="f331" class="dashicons dashicons-book-alt">book</div>
     285                                        <div alt="f316" class="dashicons dashicons-download">download</div>
     286                                        <div alt="f317" class="dashicons dashicons-upload">upload</div>
     287                                        <div alt="f321" class="dashicons dashicons-backup">backup</div>
     288                                        <div alt="f469" class="dashicons dashicons-clock">clock</div>
     289                                        <div alt="f339" class="dashicons dashicons-lightbulb">lightbulb</div>
     290                                        <div alt="f482" class="dashicons dashicons-microphone">microphone</div>
     291                                        <div alt="f472" class="dashicons dashicons-desktop">desktop</div>
     292                                        <div alt="f471" class="dashicons dashicons-tablet">tablet</div>
     293                                        <div alt="f470" class="dashicons dashicons-smartphone">smartphone</div>
     294                                        <div alt="f328" class="dashicons dashicons-smiley">smiley</div>
     295                                </div>
     296
     297                        </div>
     298
     299                        <div id="instructions">
     300
     301                                <h3>Photoshop Usage</h3>
     302
     303                                <p>Use the .OTF version of the font for Photoshop mockups, the web-font versions won't work. For most accurate results, pick the "Sharp" font smoothing.</p>
     304
     305                                <h3>CSS Usage</h3>
     306
     307                                <p>Link the stylesheet:</p>
     308
     309                                <pre>&lt;link rel="stylesheet" href="css/dashicons.css"></pre>
     310
     311                                <p>Now add the icons using the <code>:before</code> selector. You can insert the Star icon like this:</p>
     312
     313<textarea class="code" onclick="select();">
     314.myicon:before {
     315        content: "\f155";
     316        display: inline-block;
     317        -webkit-font-smoothing: antialiased;
     318        font: normal 20px/1 'dashicons';
     319        vertical-align: top;
     320}</textarea>
     321
     322                        </div><!-- /#instructions -->
     323
     324                </main><!-- #main -->
     325
     326                <!-- Required for the Copy Glyph functionality -->
     327                <div id="temp" style="display:none;"></div>
     328
     329                <script type="text/html" id="tmpl-glyphs">
     330                        <div class="dashicons {{data.cssClass}}"></div>
     331                        <div class="info">
     332                                <span class="name">← {{data.cssClass}}</span>
     333                                <span><a href='javascript:dashicons.copy( "content: \"\\{{data.attr}}\";", "css" )'>Copy CSS</a></span>
     334                                <span><a href="javascript:dashicons.copy( '{{data.html}}', 'html' )">Copy HTML</a></span>
     335                                <span><a href="javascript:dashicons.copy( '{{data.glyph}}' )">Copy Glyph</a></span>
     336                        </div>
     337                </script>
     338
     339                <?php endwhile; // end of the loop. ?>
     340
     341        </div><!-- #primary -->
     342<?php get_footer(); ?>

  • new file scss/page-dashicons.scss 

    diff --git scss/page-dashicons.scss scss/page-dashicons.scss
new file mode 100644
index 0000000..aba1493
    - +  
     1/**
     2 * Dashicons Page
     3 *
     4 * CSS for Dashicons page
     5 */
     6$spacing: 25px;
     7
     8.dashicons-page {
     9        padding: 0 !important;
     10
     11        * {
     12                box-sizing: border-box;
     13        }
     14
     15        .details {
     16                position: relative;
     17        }
     18
     19        .icon-filter {
     20                position: absolute;
     21                left: 0;
     22                bottom: $spacing * 2;
     23                padding: 0 2.5em;
     24                width: 30em;
     25
     26                #search {
     27                        width: 100%;
     28                        border: 1px solid #ccc;
     29                        border-radius: 2px;
     30                        font: 11pt sans-serif;
     31                        padding: 10px;
     32                        background: rgba(255,255,255,.8);
     33                        &:focus {
     34                                background: #fff;
     35                                outline: none;
     36                        }
     37                }
     38        }
     39
     40        .entry-content {
     41                float:left;
     42                margin-top: 0 !important;
     43                padding: 1.5em $spacing;
     44                width: 30em;
     45        }
     46
     47        #glyph {
     48                float:left;
     49                padding: 1.5em $spacing;
     50                width: 30em;
     51
     52                .dashicons {
     53                        font-size: 240px;
     54                        width: 240px;
     55                        height: 240px;
     56                        overflow: visible;
     57                }
     58
     59                .info {
     60                        float:right;
     61                        margin-top: $spacing*2;
     62                        width: 11em;
     63                }
     64
     65                span {
     66                        display: block;
     67                        margin-bottom: 1em;
     68
     69                        a {
     70                                text-decoration: underline;
     71                        }
     72                }
     73
     74                .name {
     75                        font-size: .9em;
     76                }
     77        }
     78
     79        h4 {
     80                margin: 1.5em 0;
     81                padding-top: $spacing;
     82                border-top: 1px solid lightgrey;
     83
     84                &:first-of-type {
     85                        margin-top: 0;
     86                        padding-top: 0;
     87                        border-top: none;
     88                }
     89
     90                .searching & {
     91                        display: none;
     92                }
     93        }
     94
     95        #iconlist {
     96                $size: 40px;
     97                margin-top: 1.5em;
     98
     99                .dashicons {
     100                        position: relative;
     101                        box-sizing: content-box;
     102                        padding: 10px;
     103                        width: $size;
     104                        height: $size;
     105                        overflow: hidden;
     106                        white-space: nowrap;
     107                        font-size: $size;
     108                        line-height: 1;
     109                        cursor: pointer;
     110
     111                        &:before {
     112                                margin-right: $size;
     113                        }
     114
     115                        &:after {
     116                                content: attr(alt);
     117                                display: block;
     118                                font-size: 9px;
     119                                color: #999;
     120                                text-align: center;
     121                        }
     122
     123                        &:hover {
     124                                color: #d54e21;
     125                        }
     126                }
     127        }
     128
     129        #instructions {
     130                margin-top: 1.5em;
     131                border-top: 1px solid lightgrey;
     132
     133                h3 {
     134                        margin: 1.5em 0 0.75em;
     135                }
     136        }
     137
     138        .code {
     139                display: block;
     140                font: 14px/1.5 monospace;
     141                width: 600px;
     142                white-space: pre;
     143                border: 1px solid #ccc;
     144                padding: 10px;
     145                overflow: auto;
     146                min-height: 180px;
     147        }
     148
     149}
     150 No newline at end of file

  • new file stylesheets/page-dashicons.css 

    diff --git stylesheets/page-dashicons.css stylesheets/page-dashicons.css
new file mode 100644
index 0000000..fc6db5a
    - +  
     1/**
     2 * Dashicons Page
     3 *
     4 * CSS for Dashicons page
     5 */
     6.dashicons-page {
     7  padding: 0 !important; }
     8  .dashicons-page * {
     9    box-sizing: border-box; }
     10  .dashicons-page .details {
     11    position: relative; }
     12  .dashicons-page .icon-filter {
     13    position: absolute;
     14    left: 0;
     15    bottom: 50px;
     16    padding: 0 2.5em;
     17    width: 30em; }
     18    .dashicons-page .icon-filter #search {
     19      width: 100%;
     20      border: 1px solid #ccc;
     21      border-radius: 2px;
     22      font: 11pt sans-serif;
     23      padding: 10px;
     24      background: rgba(255, 255, 255, 0.8); }
     25      .dashicons-page .icon-filter #search:focus {
     26        background: #fff;
     27        outline: none; }
     28  .dashicons-page .entry-content {
     29    float: left;
     30    margin-top: 0 !important;
     31    padding: 1.5em 25px;
     32    width: 30em; }
     33  .dashicons-page #glyph {
     34    float: left;
     35    padding: 1.5em 25px;
     36    width: 30em; }
     37    .dashicons-page #glyph .dashicons {
     38      font-size: 240px;
     39      width: 240px;
     40      height: 240px;
     41      overflow: visible; }
     42    .dashicons-page #glyph .info {
     43      float: right;
     44      margin-top: 50px;
     45      width: 11em; }
     46    .dashicons-page #glyph span {
     47      display: block;
     48      margin-bottom: 1em; }
     49      .dashicons-page #glyph span a {
     50        text-decoration: underline; }
     51    .dashicons-page #glyph .name {
     52      font-size: .9em; }
     53  .dashicons-page h4 {
     54    margin: 1.5em 0;
     55    padding-top: 25px;
     56    border-top: 1px solid lightgrey; }
     57    .dashicons-page h4:first-of-type {
     58      margin-top: 0;
     59      padding-top: 0;
     60      border-top: none; }
     61    .searching .dashicons-page h4 {
     62      display: none; }
     63  .dashicons-page #iconlist {
     64    margin-top: 1.5em; }
     65    .dashicons-page #iconlist .dashicons {
     66      position: relative;
     67      box-sizing: content-box;
     68      padding: 10px;
     69      width: 40px;
     70      height: 40px;
     71      overflow: hidden;
     72      white-space: nowrap;
     73      font-size: 40px;
     74      line-height: 1;
     75      cursor: pointer; }
     76      .dashicons-page #iconlist .dashicons:before {
     77        margin-right: 40px; }
     78      .dashicons-page #iconlist .dashicons:after {
     79        content: attr(alt);
     80        display: block;
     81        font-size: 9px;
     82        color: #999;
     83        text-align: center; }
     84      .dashicons-page #iconlist .dashicons:hover {
     85        color: #d54e21; }
     86  .dashicons-page #instructions {
     87    margin-top: 1.5em;
     88    border-top: 1px solid lightgrey; }
     89    .dashicons-page #instructions h3 {
     90      margin: 1.5em 0 0.75em; }
     91  .dashicons-page .code {
     92    display: block;
     93    font: 14px/1.5 monospace;
     94    width: 600px;
     95    white-space: pre;
     96    border: 1px solid #ccc;
     97    padding: 10px;
     98    overflow: auto;
     99    min-height: 180px; }