JSFiddle

airyland's public fiddles

• Entypo CSS

  An improved stylesheet to include with Entypo. It has a class for aria fallback (if required) and a class to access each individual icon. The naming of each icon isn't perfect, that is one part that could certainly be improved. I have adjust the font-size and position of each icon to match the demo, it can easily be adjusted in the .icon:before rule. I've also encoded the font in base-64 to "bulletproof" it. Losing a text font is a visual style issue, losing an icon font is a major usability issue. I believe it necessary to base-64 all icon fonts to fix this problem. Most icon fonts don't come with this sort of stylesheet, which makes the font difficult to use. Each user has to find out or decide on their own implementation of the icons. If an icon font is being delivered for web use it should include a sample of the best way to use the font. This is what I have attempted to do. Please do with this as you see fit. I made it because I am very particular about typography online, especially icon font implementation. I hope this stylesheet will prove useful to both you and your users.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Entypo CSS

  An improved stylesheet to include with Entypo. It has a class for aria fallback (if required) and a class to access each individual icon. The naming of each icon isn't perfect, that is one part that could certainly be improved. I have adjust the font-size and position of each icon to match the demo, it can easily be adjusted in the .icon:before rule. I've also encoded the font in base-64 to "bulletproof" it. Losing a text font is a visual style issue, losing an icon font is a major usability issue. I believe it necessary to base-64 all icon fonts to fix this problem. Most icon fonts don't come with this sort of stylesheet, which makes the font difficult to use. Each user has to find out or decide on their own implementation of the icons. If an icon font is being delivered for web use it should include a sample of the best way to use the font. This is what I have attempted to do. Please do with this as you see fit. I made it because I am very particular about typography online, especially icon font implementation. I hope this stylesheet will prove useful to both you and your users.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Entypo CSS

  An improved stylesheet to include with Entypo. It has a class for aria fallback (if required) and a class to access each individual icon. The naming of each icon isn't perfect, that is one part that could certainly be improved. I have adjust the font-size and position of each icon to match the demo, it can easily be adjusted in the .icon:before rule. I've also encoded the font in base-64 to "bulletproof" it. Losing a text font is a visual style issue, losing an icon font is a major usability issue. I believe it necessary to base-64 all icon fonts to fix this problem. Most icon fonts don't come with this sort of stylesheet, which makes the font difficult to use. Each user has to find out or decide on their own implementation of the icons. If an icon font is being delivered for web use it should include a sample of the best way to use the font. This is what I have attempted to do. Please do with this as you see fit. I made it because I am very particular about typography online, especially icon font implementation. I hope this stylesheet will prove useful to both you and your users.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• form

  Mootools 1.4.5, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• CSS sprite sheet animation

  No-Library (pure JS), HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• eLq6g

  Mootools 1.4.5, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• LRQJT

  Mootools 1.4.5, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• byz4f

  jQuery 1.8.3, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• ZbnxK

  Mootools 1.4.5, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• cRnwm

  Mootools 1.4.5, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• WtPVp

  jQuery 1.8.3, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• XXzEA

  Mootools 1.4.5, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• E8PBN

  Mootools 1.4.5, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• bcJS5

  Mootools 1.4.5, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• UUPHq

  jQuery 1.8.3, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• FjSE4

  jQuery 1.7.2, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 3xEJn

  Mootools 1.4.5, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• PWUyB

  Mootools 1.4.5, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• MBxZZ

  Mootools 1.4.5, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• jnKgg

  Mootools 1.4.5, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra

• 1
• ◀︎
• 2
• ▶︎
• 3