icons.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <script src='../../node_modules/jquery/dist/jquery.js'></script>
  6. <link href='../../dist/fullcalendar.css' rel='stylesheet' />
  7. <link href='../src/timeline/timeline.css' rel='stylesheet' />
  8. <style>
  9. .fc-icon {
  10. clear: left;
  11. float: left;
  12. margin-bottom: .1em;
  13. border: 5px solid #fff;
  14. color: #000;
  15. background: #fff;
  16. }
  17. .inverse .fc-icon {
  18. color: #fff;
  19. background: #000;
  20. }
  21. .bordered .fc-icon {
  22. border-color: #666;
  23. }
  24. td {
  25. vertical-align: top;
  26. padding: 10px 25px;
  27. }
  28. </style>
  29. <script>
  30. $(function() {
  31. var fontSizes = [ '50px', '26px', '16px', '14px' ];
  32. var td = $('td');
  33. var i;
  34. for (i = 1; i < fontSizes.length; i++) {
  35. td.after(td.clone());
  36. }
  37. $('td').each(function(i) {
  38. $(this).css('font-size', fontSizes[i]);
  39. });
  40. $(document)
  41. .on('click', function() {
  42. $('body').toggleClass('inverse');
  43. })
  44. .on('mousedown', function() {
  45. return false; // prevent native text selection
  46. });
  47. $('td').on('click', function() {
  48. $(this).toggleClass('bordered');
  49. return false; // prevent native text selection
  50. });
  51. });
  52. </script>
  53. </head>
  54. <body>
  55. <table><tr><td>
  56. <span class='fc-icon fc-icon-left-single-arrow'></span>
  57. <span class='fc-icon fc-icon-right-single-arrow'></span>
  58. <span class='fc-icon fc-icon-left-double-arrow'></span>
  59. <span class='fc-icon fc-icon-right-double-arrow'></span>
  60. <span class='fc-icon fc-icon-left-triangle'></span>
  61. <span class='fc-icon fc-icon-right-triangle'></span>
  62. <span class='fc-icon fc-icon-down-triangle'></span>
  63. <span class='fc-icon fc-icon-x'></span>
  64. </td></tr></table>
  65. </body>
  66. </html>