0

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?

Improve this question
6
  • 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, 2013 at 21:14
  • @Scott just updated
    – user1595858
    Jul 19, 2013 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?
    – user9447
    Jul 19, 2013 at 22:20
  • @Matt_2.0 obviously, want to find out how to make those type of icons
    – user1595858
    Jul 19, 2013 at 22:35
  • They're icon fonts, is that what you're trying to figure out?
    – JohnB
    Jul 19, 2013 at 22:39

1 Answer 1

Reset to default
3

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.

Improve this answer
2
  • 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).
    – user9447
    Jul 19, 2013 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, 2013 at 21:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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