zui/src/less/controls/icons.core.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// Font Awesome: icons.core.less
/// https://github.com/FortAwesome/Font-Awesome/tree/master/less
///
/// ZUI: The file has been changed in ZUI. It will not keep update with the
/// FontAwesome version in the future.
/// http://openzui.com
/// ========================================================================
/// Font Awesome 3.2.1: The Font Awesome font is licensed under SIL OFL 1.1
/// Font Awesome CSS, LESS, and SASS files are licensed under MIT License
/// Font Awesome documentation licensed under CC BY 3.0
/// Font Awesome by Dave Gandy - http://fontawesome.io
/// ========================================================================


// Font family definition

@font-face {
  font-family: @icon-font-name;
  src: url('@{icon-font-path}/@{icon-font-file-name}.eot?v=@{icon-font-version}');
  src: url('@{icon-font-path}/@{icon-font-file-name}.eot?#iefix&v=@{icon-font-version}') format('embedded-opentype'),
    url('@{icon-font-path}/@{icon-font-file-name}.woff?v=@{icon-font-version}') format('woff'),
    url('@{icon-font-path}/@{icon-font-file-name}.ttf?v=@{icon-font-version}') format('truetype'),
    url('@{icon-font-path}/@{icon-font-file-name}.svg#regular?v=@{icon-font-version}') format('svg');
  font-weight: normal;
  font-style: normal;
}


// Core style

.icon,
[class^="icon-"],
[class*=" icon-"] {
  .icon-zenicon();
}


// Fixed width

.icon:before {
  display: inline-block;
  min-width: @icon-font-size;
  text-align: center;
}


// makes sure icons active on rollover in links

a {
  .icon,
  [class^="icon-"],
  [class*=" icon-"] {
    display: inline;
  }
}


// Icon Sizes

// makes the font 33% larger relative to the icon container
.icon-lg:before {
  vertical-align: -10%;
  font-size: 4/3em;
}
.icon-2x { font-size: @icon-font-size*2; }
.icon-3x { font-size: @icon-font-size*3; }
.icon-4x { font-size: @icon-font-size*4; }
.icon-5x { font-size: @icon-font-size*5; }


// Animated rotating icon

.icon-spin {
  display: inline-block;
  animation: spin 2s infinite linear;
}

// Prevent stack and spinners from being taken inline when inside a link
a .icon-spin {
  display: inline-block;
  text-decoration: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}


// 3D transform

// Icon rotations and mirroring
.icon-rotate-90 {
  transform: rotate(90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.icon-rotate-180 {
  transform: rotate(180deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.icon-rotate-270 {
  transform: rotate(270deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.icon-flip-horizontal {
  transform: scale(-1, 1);
}
.icon-flip-vertical {
  transform: scale(1, -1);
}

.icon.icon-rotate-90,
.icon.icon-rotate-180,
.icon.icon-rotate-270,
.icon.icon-flip-horizontal,
.icon.icon-flip-vertical {
  display: inline-block;
}