Bootstrap字体令人敬畏的模拟与图像

Question

我可以在哪里找到带有图片的Twitter Bootstrap 3的图标，而不是CSS中的内容？

例如：

我们有：

.icon-ok:before {
  content: "\f00c";
}

我需要：

.icon-ok:before {
  there image
}

Answer 1

我认为没有人在github上发布这项工作。所以我认为你必须自己做。我可以建议两种方法：

1：在Photoshop等软件工具中概述字体真棒字体，将图标保存为单独的GIF，然后在您的CSS中加载gif。这种方法很好，因为字体很棒是在apache许可下分发的。您可以使用免费的商品图标集，例如Brankic1979's 350 pixel icon set。使用：before伪元素插入：

h1:before 
{
  content:url(h1-icon.gif);
}

2：用pure css替换图标（使用:: before和:: after伪元素）。下面的示例绘制了常见的“汉堡包”菜单项：

.icon_hamburger::before,
 .icon_hamburger::after {
   width: 1.625em;
   height: .313em;
   background: black;
}

.icon_hamburger::before {
  top: -.625em;
}

.icon_hamburger::after {
  bottom: -.625em;
}