Subscribe to my feed

Music Theme with Picture and Unicode Music symbols

by John 2. December 2011 16:24

The use of music symbols in HTML requires a little knowledge of fonts and their list of Unicode characters. It is common practice on web sites to cheat and just use what is available on the keyboard. Such as a # sign would indicate a sharp note and a lower case b indicate a flat. Via the use of Unicode characters we can actually use actual music symbols in our web pages. For example it looks much better to indicate a sharp note using a ♯ and flat using a ♭ symbols respectfully.

This Music Theme uses cascading style sheets (CSS) to make a list of fonts that support common music symbols.  The fonts being used (see below) is also on the list of common fonts used for both Windows and Mac. This ensures broad compatibility among browsers, in fact while I was writing this article I even tested the music symbols on my droid x and had no trouble displaying them.


font-family: Lucida Sans Unicode, Arial, Helvetica, sans-serif;

So, how do we go about using Unicode characters in our web site; since I tend to hand code my HTML I use the actual Unicode values (see below) followed by a semicolon.  However, many of today’s HTML editors have built in ways to insert Unicode characters that may make it easier.

·         -  &#x266d

·           -  &#x266e

·          -  &#x266f

To see an example of the HTML used to display these music symbols, right click and choose view source then scroll down till you find the HTML for this article.




List Examples

by Admin 2. December 2011 15:23

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Blockquote Example

Enim et venenatis tempus, quis suspendisse sem vivamus vestibulum pretium quis, gravida a eu. Augue nulla pellentesque cras, orci sed quis neque erat vel, blandit ligula dapibus sit felis velit purus.


Heading examples

by Admin 2. December 2011 15:11

Heading 1

Lorem ipsum dolor sit amet, non eu id, justo lorem volutpat ut ut metus, donec sed ultrices, aliquam primis pede purus orci magna pede. A ut vestibulum consectetuer et lacinia nunc. Metus purus elit mi volutpat mauris fugiat. Habitasse libero orci turpis, vulputate massa vitae parturient vel. Mauris leo. Amet wisi cursus tempor, magna ipsum metus aliquam lorem turpis.

Heading 2

Dui a in pharetra quam lacus, pellentesque vel nibh id nunc non, pellentesque eget nulla nullam praesent, vulputate ipsum mattis proin vestibulum natoque dapibus, cum laoreet odio.

Heading 3

Et hendrerit congue, nam velit adipiscing dolor sed amet. Non libero erat dolore nam ultrices, eu tempus, nisl ac at condimentum vel imperdiet. Ut neque eros cras morbi ipsum nam, cursus pellentesque purus ante, venenatis arcu blandit nec accumsan.

Heading 4

Nullam tellus tellus eros, pede in wisi phasellus nibh varius, nec rhoncus ultrices consectetuer, nisl consequat dapibus pulvinar, et pellentesque sit vestibulum luctus tempus purus.

Heading 5

In malesuada in, mi sapien, libero cras mattis semper at in massa, quisque nunc sed elementum arcu, mi elit pellentesque lorem. Adipiscing ridiculus lacus lorem mauris. Eget tellus, adipiscing et a.

Heading 6

Rutrum nec at sed viverra nunc in, at sed duis ipsum maecenas a. Felis eget, varius blandit massa, amet erat urna in ut, lobortis ut diam quam ut suspendisse, morbi orci nulla elit.




Tag cloud