0

我将如何用引导程序覆盖字体真棒的“图标用户”图标？

这是我的标题：

<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>
4

4 回答 4

2

在关闭 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>
于 2013-05-20T18:51:41.330 回答
1

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

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;
}

但最重要的是，每个引导图标都有特定的定位。您也必须将其设置回去。

.icon-user {
background-position: -168px 0;
}
于 2013-05-20T18:58:35.747 回答
0

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

于 2013-05-20T18:51:38.577 回答
0

你试过改变font-awesome.min.css吗？只需在 icon-user 上“查找”并注释掉那里的 CSS。它应该只是隐藏字体真棒图标，并可能在其位置显示 Bootstrap 图标。如果没有一个要覆盖，一个不会覆盖另一个。

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

于 2013-05-20T19:22:04.600 回答