icons.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  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-chevron-left'></span>
  57. <span class='fc-icon fc-icon-chevron-right'></span>
  58. <span class='fc-icon fc-icon-chevrons-left'></span>
  59. <span class='fc-icon fc-icon-chevrons-right'></span>
  60. <span class='fc-icon fc-icon-plus-square'></span>
  61. <span class='fc-icon fc-icon-minus-square'></span>
  62. <span class='fc-icon fc-icon-x'></span>
  63. </td></tr></table>
  64. </body>
  65. </html>