Css 固定宽度字形图标

我正在一个使用引导的网站上工作。我只使用附带的图标包。不过，我需要三个重要的特性

固定宽度图标

Fa旋转

旋转和翻转选项

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

---

谢谢大家!

ajma是正确的。这些效果只是css对FontAwesome的添加，可以轻松复制。您还可以复制这些css规则，将它们添加到您自己的样式表中，然后将相应的类添加到glyphicon

以下是一个示例和示例：

---

当然，这只是css。您可以查看所需的选项（我推荐chrome开发工具），请参阅css。可能无法找到旋转的关键帧，但您可以下载css for FA并搜索它。很好的答案，说明了这一点，使解决方案更容易找到。我在一个站点上同时使用fa和GlyphIcon，即使包含了fa，fa样式也不总是适用于GlyphIcon，除非明确声明如下。我还没来得及弄清楚原因，我只是把这个添加到我的文档中，效果很好。-解决方案

.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);
  }
}