Question

如何使用引导程序覆盖字体真棒“icon-user”图标？

这是我的标题：

<head>
  <meta charset="utf-8">
  <title>Blah Blah Blah</title>

  <link href="assets/css/bootstrap.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:bold">

  <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">

  <link rel="shortcut icon" href="favicon.png">
</head>

Answer 1

在关闭head标签之前添加此

<style type="text/css">    
.icon-user:before {
  content: "";
}
.icon-user {background-image: url("url/to/your/bootstrap/img/glyphicons-halflings.png"); width: 14px; display: inline-block; background-position: -168px 0;}
</style>

Answer 2

由于字体真棒实际上覆盖了引导程序，因此必须覆盖覆盖。

Fontawesome为图标类添加了一堆css，但最重要的是：

[class^="icon-"], [class*=" icon-"] {
font-family: FontAwesome;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
}

您需要将它们设置回原来的状态，这是原件：

[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}

但最重要的是，每个bootstrap图标都有一个特定的定位。你也必须把它放回去。

.icon-user {
background-position: -168px 0;
}

Answer 3

最简单的方法是更改样式表的顺序。除非前面的规则更具体，否则名为last的那个优先。请参阅级联样式的规范http://www.w3.org/TR/CSS21/cascade.html

Answer 4

您是否尝试过更改font-awesome.min.css？只需对icon-user进行“查找”并在那里注释掉CSS。它应该只是隐藏字体很棒的图标，并可能在它的位置显示Bootstrap。如果没有人要覆盖，就不会覆盖另一个。

.icon-user:before{content:"\f007"}

使用Bootstrap图标覆盖字体 - 真棒图标

4 个答案: