wordpress / dashicons Goto Github PK

Hey Guys,

Straight into the issue I'm having, you have a fixed font-size, width and height set on your .dashicons class. This makes actually getting the icon to fall inline with text not so straight forward if using a font-size different to the standard baseline size of 20px.

Here is a what I propose the class should look like:

.dashicons {
  font-family: "dashicons";
  display: inline-block;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

The original 20px set on the width and height has no affect on the :before element that is actually showing the icon as that grows to it's content based on font-size, it simply alters the default inline layout.

As for the font-size that is a decision that should be left up to the developer making use of the icons. Having to override the default of 20px is out of line with the majority of font's out there like FontAwesome or anything created with IcoMoon that simply inherit the parents font-size.

There are also some transitions included in the .dashicons class which should rather be refactored out into the #iconlist div class in the styles.css file.

Overall it seems as though some style properties used to create the index.html page have crept into the core dashicons.css file when they should be in the styles.css file. This makes simply switching from other font's to dashicons in plugins etc. more complicated as we have to go and override these properties to get the icons to display correctly inline.

This issue is even evident on http://melchoyce.github.io/dashicons/. Simply open dev tools and inspect any of the icons and you will notice the rather strange layout. A small 20px div (.dashicons) padded to increase it's size to the required size to get the layout to work as expected. In dev tools untick the padding on the #iconlist div class and all the icons overlap each other, this is not how the default layout should behave.

With the above changes to the .dashicons class the #iconlist div class in styles.css could be changed from the current one using paddings to force the layout to one that simply uses the font-size and margins so the layout behaves as one would expect from an inline element adjusting itself according to the font-size. I also added in the transitions that I removed from the above to this class. Not everyone will want transitions and this is simply something else we would need to override.

#iconlist div {
  margin: 10px;
  font-size: 40px;
  line-height: 1;
  -moz-transition: color .1s ease-in 0;
  -webkit-transition: color .1s ease-in 0;
}

Please let me know what you think as currently the hard coded defaults seem more restricting than anything else.

Thanks

Simply put, I think Dashicons would do well to add a "trashicon." WordPress Core uses the "Trash" metaphor for deletion (as a post status.), so there should be an icon for it.

Specific Use Case Example: Represent All Post Statuses

It's awesome to see Dashicons in the 3.8 alphas and I've already incorporated them in a future plugin update for Post Status Menu Items. Among other things, the plugin adds a list of Posts status counts (e.g. 24 Drafts) to the "Site Content" Dashboard widget. I wanted to use a Dashicon with each Core status. Here's what I've got right now:

I think that those work pretty well with the exception of the Trash status.

Concepts

In hopes of getting things going, I drew up a few concepts that I hope would fit in nicely with dashicons:

C and D play with a "[recycle?] bin" concept that is pretty but I don't think works quite as well.

B introduces a touch of perspective on A and E is mostly A in reverse. I'd personally lean toward E.

Icons for All Post Statuses

One last thing: Looking back at the specific use case, it's possible that each status should get it's own icon. The admin could potentially use those icons with the statuses across the top of the Posts screen. This would prevent the appropriation of other icons from their intended meanings (i.e. the "Pending" icon above represented Auto-Updates on the 3.7 Update Welcome Screen).

(FWIW, I actually don't understand what the "Post Status" icon is supposed to represent. A pin?)

From: https://core.trac.wordpress.org/ticket/33338

Go through the svg folder and change all the untitled[x].svg file names to more semantic ones.

From: https://core.trac.wordpress.org/ticket/34137

For shuttle schedules or other applications: a car, bus and/or truck?

From: https://core.trac.wordpress.org/ticket/34098

Social Icons for Skype, FaceTime, (is Google+ Hangouts too specific? just use G+?), other popular "video chat" social media

There are device icons for mobile, tablet and desktop. I could use a laptop icon for my project, and I suspect others may find it useful too.

I created an icon following the Dashicons style guide.

Hope we can use this.
laptop.svg.zip

From: https://core.trac.wordpress.org/ticket/29444#comment:23

Hi, if you could do a dash icon for podcast that would be great. Fwiw I was thinking along the lines of a stylised pair of headphones..??

all the best

Rick

I simply get a broken sample page when I download the repo.

1. Download the repo
2. Extract to a folder on the desktop.
3. Open the index html.
4. Get broken demo
   

For example, icon f478 according to http://melchoyce.github.io/dashicons/ is "dashicons-archive" however when \f478 is inserted into a CPT definition, "dashicons-text" is shown.

Hi Guys,

I'm a Plugin developer and I was looking for a Email icon since we have a Share and Share2 icons, I thought that might be a good idea.

There is any ideas to expand this icon base to cover some possibilities like around WordPress and general stuff?

This would prevent people from including their own fonts/svg files.

This is not an issue, but just wanted to let you know - I created a dashicons picker jQuery plugin which makes picking a dashicon in the admin a breeze:

https://github.com/bradvin/dashicons-picker

From: https://core.trac.wordpress.org/ticket/32614

minus icon "-"

Hi guys,

can you create a dashicon for podcasts option please ?

Thanks !

I was wondering about the purpose of source/version.txt. If this represents the current version of Dashicons, why don't you also make use of GitHub's release system? Would be nice if one could relate to a specific version or download a specific release.

Thanks for your great icon sets for WordPress.
I decided to use this icon set for most of our WordPress products
It's good if in the future you can add more few icons:

• Desktop icon: http://fontawesome.io/icon/desktop
• Tablet icon: http://fontawesome.io/icon/tablet/
• Mobile icon: http://fontawesome.io/icon/mobile/
• Clock icon: http://fontawesome.io/icon/clock-o/
• Safety, support icon: https://www.iconfinder.com/icons/111047/safety_support_icon#size=128

Many times, I've found myself wishing I could link to a specific icon for referencing it to someone else. I recently noticed that the Genericons site provides this exact feature:

1. Clicking an icon triggers a hash change on the web-address (e.g. http://genericons.com/#audio)
2. Visiting URL with hash loads page with appropriate icon at top.

It would be handy!

dashicons-archive should be f480, and dashicons-text should be f478

Make all icons to have the same size,
http://wpimpact.com/wp-content/uploads/2013/12/Untitled-8.png
you can see some are smaller than others... the grid has 28px width&height, some icons fit some not...

ex: wp logo is too big
but arrows are too small..

Me: FF latest, Win 7

With 6b06c5f we have 4 new icons, but no CSS classes for them yet.

Let's do this and get an update into WP 4.0.

May you make some function "get_wp_icons"?
They must return all register icons in Wordpress.

Do this please.
Thanks for future.

p.s. Some like this array
$icons = array(
'admin' => array(
'appearance',
'collapse',
'comments',
'generic',
'home',
'links',
'media',
'network',
'page',
'plugins',
'post',
'settings',
'site',
'tools',
'users',
),
'album',
'align' => array(
'center',
'left',
'none',
'right'
),
'analytics',
'archive',
'arrow' => array(
'down-alt2',
'down-alt',
'down',
'left-alt2',
'left-alt',
'left',
'right-alt2',
'right-alt',
'right',
'up-alt2',
'up-alt',
'up',
),
'art',
'awards',
'backup',
'book',
'book-alt',
'building',
'businessman',
'calendar-alt',
'calendar',
'camera',
'carrot',
'cart',
'category',
'chart' => array(
'area',
'bar',
'line',
'pie'
),
'clipboard',
'clock',
'cloud',
'controls' => array(
'back',
'forward',
'pause',
'play',
'repeat',
'skipback',
'skipforward',
'volumeoff',
'volumeon',
),
'dashboard',
'desktop',
'dismiss',
'download',
'editor' => array(
'aligncenter',
'alignleft',
'alignright',
'bold',
'break',
'code',
'contract',
'customchar',
'distractionfree',
'expand',
'help',
'indent',
'insertmore',
'italic',
'justify',
'kitchensink',
'ol',
'outdent',
'paragraph',
'paste-text',
'paste-word',
'quote',
'removeformatting',
'rtl',
'spellcheck',
'strikethrough',
'textcolor',
'ul',
'underline',
'unlink',
'video',
),
'edit',
'email-alt',
'email',
'excerpt-view',
'exerpt-view',
'external',
'facebook-alt',
'facebook',
'feedback',
'flag',
'format' => array(
'aside',
'audio',
'chat',
'gallery',
'image',
'links',
'quote',
'standard',
'status',
'video',
),
'forms',
'googleplus',
'grid-view',
'groups',
'hammer',
'heart',
'id-alt',
'id',
'images' => array(
'alt2',
'alt',
),
'image' => array(
'crop',
'flip-horizontal',
'flip-vertical',
'rotate-left',
'rotate-right',
),
'index-card',
'info',
'leftright',
'lightbulb',
'list-view',
'location-alt',
'location',
'marker',
'media' => array(
'archive',
'audio',
'code',
'default',
'document',
'interactive',
'spreadsheet',
'text',
'video',
),
'megaphone',
'menu',
'microphone',
'migrate',
'minus',
'money',
'nametag',
'networking',
'no-alt',
'no',
'palmtree',
'performance',
'phone',
'playlist-audio',
'playlist-video',
'plus-alt',
'plus',
'portfolio',
'post-status',
'post-trash',
'pressthis',
'products',
'randomize',
'redo',
'rss',
'schedule',
'screenoptions',
'search',
'share1',
'share-alt2',
'share-alt',
'share',
'shield-alt',
'shield',
'slides',
'smartphone',
'smiley',
'sort',
'sos',
'star' => array(
'empty',
'filled',
'half',
),
'store',
'tablet',
'tagcloud',
'tag',
'testimonial',
'text',
'tickets-alt',
'tickets',
'translation',
'trash',
'twitter',
'undo',
'universal' => array(
'access-alt',
'access',
),
'update',
'upload',
'vault',
'video' => array(
'alt2',
'alt3',
'alt',
),
'visibility',
'welcome' => array(
'add-page',
'comments',
'edit-page',
'learn-more',
'view-site',
'widgets-menus',
'write-blog',
),
'wordpress-alt',
'wordpress',
'yes'

);

Have you considered adding the BuddyPress and bbPress icons?

From: https://core.trac.wordpress.org/ticket/33692

Load alternative icons based on language installed.

Flip icons horizontally if RTL.

Since I'm a horrible designer, I'll only suggest to add new social icons, for example:

1. Instagram;
2. Like button (Facebook);
3. LinkedIn;
4. Vk

Thanks,
Yeltsin

From: https://core.trac.wordpress.org/ticket/34137

For animal shelter, dog groomer sites: I could really use a generic dog icon or just a pawprint. I can imagine that requests from other folks for cat, horse, cow, pig, chicken could follow, so I'm not sure how far you'd want to go with this. ;)

From: https://core.trac.wordpress.org/ticket/34098

From: https://core.trac.wordpress.org/ticket/34137

For plants database (conservation or nursery website), a leaf icon and a simple tree icon? (Conifer, deciduous, or one of each?)

Would love to see a code icon in Dashicons. I've seen a simple </> used in a lot of other icon fonts.

Thoughts?

Hello,

Could you guys please create an icon for cellular or mobile?

Thanks in advance!

From: https://core.trac.wordpress.org/ticket/34098

From: https://core.trac.wordpress.org/ticket/29444#comment:23

Please create icon instagram.
Thanks for future

They should be commented out until 4.0 launches.

Is the handy http://melchoyce.github.io/dashicons/ gallery page permanent? Will it be synched with changes in Wordpress core?
I made a wiki redlink on http://codex.wordpress.org/Function_Reference/add_menu_page for or http://codex.wordpress.org/Dashicon (but it should probably be "Dashicons").
I'll post the same question on the MP6 support forum.

From: https://core.trac.wordpress.org/ticket/34085

Currently it says:

Dashicons icon font for MP6, currently in development. You can check out MP6 at http://wordpress.org/extend/plugins/mp6/.

Maybe something like:

Dashicons icon font for WordPress admin[, since 3.8].

The Base64 string is causing the styles for this to not validate. Can you provided a version that includes a file in place of the Base64 string? Looks like it's supposed to be the woff format, but when I tried including the .woff file instead of the Base64 string, the fonts stopped working consistently in Internet Explorer.

Thanks.

Hello,

I would like to have a new dashicon for videogames. Something with a gamepad for example.
I will use it for my custom post type.

Thanks in advance!

From: https://core.trac.wordpress.org/ticket/33384

Here: https://developer.wordpress.org/resource/dashicons

Current: https://developer.wordpress.org/resource/dashicons/#googleplus

New: https://plus.google.com/+googleplus/posts?pid=6189586698986343618&oid=101560853443212199687

From: https://core.trac.wordpress.org/ticket/33873

There are currently two icons for Facebook and two icons for Twitter. But sadly none for Google+.

Would be nice to have one. Thanks!

Thank you so much for dashicons for WordPress. Could someone be kind enough to create a Print/Printer icon? Yes, that very humble icon. We still need those basic icons. Cheers and thanks in advance.

I had a Varnish icon made, there will be an alternative too with body but I think this looks best. It is svg in zip format to please github.
varnish vector.zip