在CSS中使用Twitter Bootstrap glyphicons

Question

在CSS中使用Twitter Bootstrap glyphicons

use*_*582 21 css image twitter-bootstrap glyphicons

我想添加一个Twitter bootstrap glyphicon来替换下面CSS文件中的图像引用,虽然不知道如何.

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

Run Code Online (Sandbox Code Playgroud)

在HTML中我会添加如下:

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

Run Code Online (Sandbox Code Playgroud)

有任何想法吗？

更新 - 尝试以下虽然它只显示Firefox的firebug中的宽度和高度:

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

Run Code Online (Sandbox Code Playgroud)

不知道为什么它没被拿起来？

Answer 1

小智 109

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

HTML

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

Run Code Online (Sandbox Code Playgroud)

CSS

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

Run Code Online (Sandbox Code Playgroud)

假设您有glyphicon字体(它们随Bootstrap免费提供),这应该可以工作

要获取字符代码,您可以在浏览器中使用glyphicons打开Bootstrap文档,并使用开发人员工具进行检查. (11认同)
这是一个包含所有Glyphicon实体的[cheatsheet](http://glyphicons.bootstrapcheatsheets.com/#)(对于`content:""part"): (10认同)
在上面的备忘单页面上,您可以转到控制台并运行:`$('span [data-unicode]').each(function(k,v){console.log(k +''+ $(v) .attr('class')+''+ $(v).data('unicode'))});`获取字形名称及其实体的列表 (5认同)
这应该标记为答案.这非常有效. (2认同)

Answer 2

Tep*_*orn 2

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，11 月前
查看次数：	61284 次
最近记录：	11 年，1 月前