core.less 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. /* FONT AWESOME CORE
  2. * -------------------------- */
  3. [class^="icon-"],
  4. [class*=" icon-"] {
  5. .icon-FontAwesome();
  6. }
  7. [class^="icon-"]:before,
  8. [class*=" icon-"]:before {
  9. text-decoration: inherit;
  10. display: inline-block;
  11. speak: none;
  12. }
  13. /* makes the font 33% larger relative to the icon container */
  14. .icon-large:before {
  15. vertical-align: -10%;
  16. font-size: 4/3em;
  17. }
  18. /* makes sure icons active on rollover in links */
  19. a {
  20. [class^="icon-"],
  21. [class*=" icon-"] {
  22. display: inline;
  23. }
  24. }
  25. /* increased font size for icon-large */
  26. [class^="icon-"],
  27. [class*=" icon-"] {
  28. &.icon-fixed-width {
  29. display: inline-block;
  30. width: 16/14em;
  31. text-align: right;
  32. padding-right: 4/14em;
  33. &.icon-large {
  34. width: 20/14em;
  35. }
  36. }
  37. }
  38. .icons-ul {
  39. margin-left: @icons-li-width;
  40. list-style-type: none;
  41. > li { position: relative; }
  42. .icon-li {
  43. position: absolute;
  44. left: -@icons-li-width;
  45. width: @icons-li-width;
  46. text-align: center;
  47. line-height: inherit;
  48. }
  49. }
  50. // allows usage of the hide class directly on font awesome icons
  51. [class^="icon-"],
  52. [class*=" icon-"] {
  53. &.hide {
  54. display: none;
  55. }
  56. }
  57. .icon-muted { color: @iconMuted; }
  58. .icon-light { color: @iconLight; }
  59. .icon-dark { color: @iconDark; }
  60. // Icon Borders
  61. // -------------------------
  62. .icon-border {
  63. border: solid 1px @borderColor;
  64. padding: .2em .25em .15em;
  65. .border-radius(3px);
  66. }
  67. // Icon Sizes
  68. // -------------------------
  69. .icon-2x {
  70. font-size: 2em;
  71. &.icon-border {
  72. border-width: 2px;
  73. .border-radius(4px);
  74. }
  75. }
  76. .icon-3x {
  77. font-size: 3em;
  78. &.icon-border {
  79. border-width: 3px;
  80. .border-radius(5px);
  81. }
  82. }
  83. .icon-4x {
  84. font-size: 4em;
  85. &.icon-border {
  86. border-width: 4px;
  87. .border-radius(6px);
  88. }
  89. }
  90. .icon-5x {
  91. font-size: 5em;
  92. &.icon-border {
  93. border-width: 5px;
  94. .border-radius(7px);
  95. }
  96. }
  97. // Floats & Margins
  98. // -------------------------
  99. // Quick floats
  100. .pull-right { float: right; }
  101. .pull-left { float: left; }
  102. [class^="icon-"],
  103. [class*=" icon-"] {
  104. &.pull-left {
  105. margin-right: .3em;
  106. }
  107. &.pull-right {
  108. margin-left: .3em;
  109. }
  110. }