在 CSS 中使用 Twitter Bootstrap 字形图标

Posted 2023-03-06

【中文标题】在 CSS 中使用 Twitter Bootstrap 字形图标

【英文标题】：Using Twitter Bootstrap glyphicons in CSS

【发布时间】：2012-12-23 17:13:43

【问题描述】：

我想添加一个 Twitter 引导 glyphicon 来替换下面 CSS 文件中的图像引用，但不确定如何。

.edit-button 
  background: url('../img/edit.png') no-repeat;
  width: 16px;
  height: 16px;

在 html 中我会添加如下：

<i class="icon-search icon-white"></i>

有什么想法吗？

更新 - 尽管它只在 Firefox 的萤火虫中显示宽度和高度，但尝试了以下操作：

.edit-button

  /* background: url('../img/edit.png') no-repeat; */
  background: url(../img/glyphicons-halflings.png) no repeat -96px -72px !important;
  width: 16px;
  height: 16px;

不知道为什么没有收到？

【问题讨论】：

它适用于我的机器。确保路径正确

【参考方案1】：

我喜欢使用 :after 或 :before 方法...

HTML

<a href="http://glyphicons.com/" class="arrow">Click Here</a></div>

CSS

.arrow:after 
  font-family: "Glyphicons Halflings";
  content: "\e080";

假设您有 glyphicon 字体（它们随 Bootstrap 免费提供），这应该可以工作

【讨论】：

要获取字符代码，您可以在浏览器中打开带有字形图标的 Bootstrap 文档并使用开发人员工具进行检查。

这是一个带有所有 Glyphicon 实体的 cheatsheet（对于 content: "" 部分）：

在上面的备忘单页面上，您可以转到控制台并运行以下命令：$('span[data-unicode]').each(function(k,v) console.log( k + ' ' + $(v).attr('class') + ' ' + $(v).data('unicode') ) ); 以获取字形名称及其实体的列表

【参考方案2】：

那么为什么不使用<i> 标签来编辑按钮？试试这个：

<button type="submit" name="edit" class="edit-button btn btn-primary">
   <i class="icon icon-edit icon-white"></i>
   Edit
</button>

【讨论】：

您好，感谢您的回复。虽然我想知道是否可以更新我上面包含的 CSS 以显示字形而不是图像。如果可能的话，我想知道如何:)

使用这个background: url(glyphicons-halflings.png) no repeat -96px -72px !important;，因为它是精灵图像，所以你必须指定图像的位置。

谢谢。我做了你建议的改变，在萤火虫中它没有出现。在浏览器中它看起来像一个空的灰色小盒子 :0 ？刚刚更新了我的原始帖子...

您好再次尝试了以下小更新： background: url('../img/glyphicons-halflings.png') no-repeat -96px -72px !important;只需在“不重复”中的图像名称和连字符周围添加单引号。 +1 为您提供帮助和快速响应 :)

很好的替代建议，但没有回答问题。我的可点击对象是一个表头，我不想在其中添加一个图标并在需要更改图像时将其更改。