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

时间:2014-03-17 08:05:27

标签: twitter-bootstrap twitter-bootstrap-3

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

例如:

我们有:

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

我需要:

.icon-ok:before {
  there image
}

1 个答案:

答案 0 :(得分:0)

我认为没有人在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;
}