css - 在 Twitter Bootstrap 3 中使用图像图标

标签 css twitter-bootstrap

我正在从 Twitter Bootstrap v2 迁移到 v3。在 v2 中,我有十几个在 css 中定义的自定义图标:

.icon-pc {
    background-image: url("pc.png");
    background-position: center center;
}

我知道在 Twitter Bootstrap v3 中他们现在使用 Glyphicons,但这对我来说不是一个现实的方法,因为我的图标是多色 PNG 文件并且不能很好地用作字体...

有没有一种简单的方法可以像旧的 v2 图标那样在 v3 中完成这些工作?

最佳答案

从 sprites.less 生成的 css 中复制了这个 block ,效果非常好:

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-position: 14px 14px;
  background-repeat: no-repeat;
  margin-top: 1px;
}

现在我的好老<i class="icon-custom"></i>工作正常。

关于css - 在 Twitter Bootstrap 3 中使用图像图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19435997/

相关文章:

html - 如何在 Bootstrap 4 上创建 5 和 4(对于移动设备)相等的列

html - Bootstrap 3 字形 CDN

css - 悬停在 IE 中不起作用

android - 响应表不滚动

Javascript 切换多个按钮

javascript - Bootstrap : Keeping content responsive when using an offcanvas sidebar

javascript - Bootstrap 模态内容未在 Firefox 或 Safari 以及手机中显示

html - 如何将输入元素移动到页面底部?

html - 浏览器填充的表单输入文本的样式不同,使输入字段不可读

javascript - angularJS 中的动态 Bootstrap 进度条