固定宽度的字形图标

Question

我正在开发一个使用 Bootstrap 的网站。我只使用附带的 Glyphicons 包。不过，我需要 Font Awesome 中的三个重要功能。

固定宽度图标
发旋
旋转和翻转选项

这三个特点都可以在examples中看到。我的问题是，有没有办法将这些功能包含在 Glyphicons 包中？如果可以，怎么做？

谢谢！

Answer 1

Ajmajmajma 是正确的。这些效果只是 css 对 FontAwesome 的补充，可以轻松复制。您也可以复制那些 css 规则，将它们添加到您自己的样式表中，然后将相应的类添加到字形图标中。

这是一个例子 fiddle:

.glyphicon-fw {
    width: 1.28571429em;
    text-align: center;
}

.glyphicon-spin {
    -webkit-animation: glyphicon-spin 2s infinite linear;
    animation: glyphicon-spin 2s infinite linear;
}

.glyphicon-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.glyphicon-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.glyphicon-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.glyphicon-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.glyphicon-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}
:root .glyphicon-rotate-90,
:root .glyphicon-rotate-180,
:root .glyphicon-rotate-270,
:root .glyphicon-flip-horizontal,
:root .glyphicon-flip-vertical {
  filter: none;
}

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

固定宽度的字形图标

Fixed Width Glyphicons

css

twitter-bootstrap

glyphicons