jp19 25

Hi, I have a site on online piano, where I use css3 for some buttons. Please look at the menu on the right side of this site Now, what I want to do is, display a small "icon" alongside the buttons. For example, the piano button will have a piano icon, the violin button will have a violin icon and so on. How do I achieve this in CSS3 using minimal code change.

I want something along the lines of what is shown here (for example, they have a music icon on music button, umbrella on weather button etc). Except, what I would like it, if the icon could be something like a badge or medal which lies partly on the button and partly outside.

1 answer

danwellman 5600

You could add a span to the buttons and add each icon as a background image. As long as the span is position absolutely (and the button itself is positioned relatively) you should be able to position it so that it appears partly inside and partly outside. If you didn't want to add extra mark-up for the icons, you could use the :before psuedo selector to add the icons

The other site you reference actually uses hex characters for all of the icons, not images, which is pretty cool and probably helps the page load much quicker...

Answered almost 6 years ago by danwellman
  • I wonder if I can get hex characters for piano, guitar and other musical instruments online. Doubt not :) jp19 over 5 years ago
  • I wonder if I can get hex characters for piano, guitar and other musical instruments. Doubt not - I will have to use some small online images I guess. jp19 over 5 years ago