stop confusing everyone make your 3.0 icons more use friendly

[soaringeagle]

so how many have noticed members and mobile visitors get confused and cant figure out how to access the menu the add or edit buttons etc

replace those confusing  + and pencil icons with ones that actualy say what they do

note

you can easily create your own icons  in any shape or size in photoshop upload to file manager

and simply replace the urls

screenshoys

(i didnt bother doing the feature icon since only admins ee it)

and now some simple code

.icon.icon-add {
background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/11389127?profile=original");
background-position: center center !important;
background-size: auto auto;
height: 30px;
width: 40px;
}
.icon.icon-edit {
background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/11389111?profile=original");
background-size: auto auto;
background-position: center!important;
height: 30px;
width: 40px;
}
.icon.icon-menu {
background-image: url(https://api.ning.com/files/Vej5VoDX8BW56PQ1jIW6zk-vyLrQllsQak4*ezPxgk3eXVsjgpqDQWJxyp6q5MnDvSZUIbNsE8hFkRheuzhKEEPgu85HnyV7/menu.png);
background-size: auto auto;
background-position: center!important;
height: 30px;
width: 40px;}

note :

this is for the icons themselves only not the button styling

[soaringeagle]

of it was an embarrassingly simple tip

almost didnt want to post it but figured its soooo useful..nearly essential that i thought most non coders would want it

[Kos]

Initially I wanted to use larger icons to such as this.  Think they would encourage much more interaction but couldn't get positioning right either.  Obviously I don't know what I'm doing.  ha!

[soaringeagle]

use the postioning codes i used but adjust height/width to match the image sizes

but also..you will have to use the classes from the features to apply dig=ferent ones to diferent pages (forums vs photos)

if u want the more universal approach use the .icon-edit selectors to style all edit buttons at once

[Kos]

Oh, btw you forgot "      "  in your 3rd png example above.  Don't know if it matters but I added it when I saw them missing.

[soaringeagle]

doesnt seem to matter

firebug doesnt add it

pasting into ning works fine without it

but it was added on save to 2 of em not the 3rd maybe if i published a seciond time after adding it it would add it there too

but it works fine with or without it seems

[Kos]

They should feature this discussion.  Everyone and their brother will want to re-design those plain grey icons.

[soaringeagle]

i agree completely..i think it was essential to the sites usability

i understand the reasoning behind the simple icons for mobile friendliness but  its just as easy to be just slightly larger  and descriptive so ppl know what the heck they are clicking on

i had members say they literaly had to try every button to figure out what it did

[Kos]

I had made icons 30x30 and used the icon tag but the image came out wonky when I uploaded; I gave up and went to bed.  I'm still learning when it comes to {background} versus {background-image: URL} and all of that code talk.  *sigh*  Well at least I'm trying (and already had my icons ready).  If anyone wants to use them, feel free to click and save their URL.  Your code works like a charm.  Thank you once again.

[soaringeagle]

yea u had to overide the position and size to get it to work right

when i 1st tried all i saw was the d..and huge

cause the old code uses an icon css sprite 1 image for all icons then reposition the image so the proper icons visible  this means fewer http requuests fike downloads etc cause 1 image is used fir all icons..

technicaly u could create a new css sprite and do the same thing

heres the images i used

[Kos]

I'm re-making mine now using http://dabuttonfactory.com/.  Nowhere near as trippy as yours.  The fit right in with your site design. #Cool.  Wish I had a "cool" site to play with.  *lol*  Maybe some day I'll come up with an idea........