Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I want to understand how the icons used in Study room' whiteboard were inserted.

To see what I mean, navigate to the site, click Create button and then Join button on the animation. If you observe closely the tip of the brush, pen etc changes based on the color selected:

enter image description here

From the google developer kit, I don't see any background picture at the place of icon but can see some junk character. Can anyone throw some light on what type of icons are used and how to design those?

share|improve this question
1  
Don't ask users to jump through hoops. You should put as much effort into your question as others will into their answer. Take a screen shot and link to that in your question. It's also very difficult to understand what you are asking here. –  Scott Jul 19 '13 at 21:14
    
@Scott just updated –  user1595858 Jul 19 '13 at 22:12
1  
I agree.. what is your question? Are you wanting to know how to make icons or are you trying to figure out how to design something similar to the developer kit? –  Matt Jul 19 '13 at 22:20
    
@Matt_2.0 obviously, want to find out how to make those type of icons –  user1595858 Jul 19 '13 at 22:35
    
They're icon fonts, is that what you're trying to figure out? –  JohnB Jul 19 '13 at 22:39
show 1 more comment

1 Answer 1

up vote 3 down vote accepted

If you go it iconmoon, you can follow their tutorial and get yourself whatever icons you want. The junk character is a character using iconmoon font. if you look at the rule .icon-font{} in dev tools (on your screenshot) you'll see font-family: 'iconmoon'; This way you can control the behavior of that div a little easier with just css and text, no images are involved.

It will work in just about all browsers, (ie7,8,9,10, ff, chrome), and you can base64 encode it as well (if you want just a couple characters) and drop into the style sheet.

share|improve this answer
    
I would be good if you could add more information, like a tutorial, instead of just linking to an external site (if the link goes down this answer becomes useless in the future and posting "tutorials" and "external links" we try to deviate from as much as possible). –  Matt Jul 19 '13 at 22:47
1  
In this case if icomoon goes down the tutorial will be useless as the tutorial is for icomoon which is an online application. This is a great application for quickly creating icon fonts using either their icons or your own. –  rdellara Sep 18 '13 at 21:40
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.