bootstrap 3.3.6 plus 图标有变化吗？

Question

当我使用引导程序加号图标时，它很厚。例如。

span {
  font-size: 30px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />

<span class="glyphicon glyphicon-plus"></span>

正如您所见，加号图标很厚，但在某些使用引导程序的网站上，我发现相同的加号图标很薄，例如http://gporetro.com/ 移动设备上的菜单具有相同的 30px 字体大小的细加号图标。

• bootstrap 3.3.6 plus 图标现在变粗了吗？
• 如何使用相同的旧稀释剂加号图标？

谢谢。

Answer 1

在我看来他们正在使用自定义 CSS。

span {
  font-size: 30px;
}

<link href="http://gporetro.com/css/bootstrap.css" rel="stylesheet" />

<span class="glyphicon glyphicon-plus"></span>

您也可以在他们的“responsive.css”文件中找到它。

nav .dropdown .glyphicon-plus {
    font-size: 30px;
    font-weight: 700;
    color: #FCFCFC;
    padding: 5px 20px;
    position: static;
    cursor: pointer;
    float: right;
}

虽然，我现在对它如何在 sn-p 窗口中显示更薄的 plus 感到困惑，而没有链接该特定的 CSS 文件。 编辑：正如另一个答案中所解释的，字体文件本身丢失了，所以它回退到另一个 + 号。

Answer 2

1. responsive.css 上有一些 css 覆盖
2. gporetro.com 缺少图标字体文件。

---

nav .dropdown .glyphicon-plus {
    font-size: 30px;
    font-weight: 700;
    color: #FCFCFC;
    padding: 5px 20px;
    position: static;
    cursor: pointer;
    float: right;
}

Bootstrap 有以下指令。

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

}

如果您在 gporetro 上检查字体文件的 URL，您将获得 404，而在引导 CDN 上您会获得文件。我以 .eot 为例，但对于所有扩展名都是如此。

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot

http://gporetro.com/fonts/glyphicons-halflings-regular.eot

注意：基础 css 位于以下位置：

http://gporetro.com/css/bootstrap.css https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

您可能会问，它是如何呈现 + 号的呢？这是因为 glyphicon 使用默认的 HTML 代码作为加号每个是\002b' - http://htmlarrows.com/math/plus-sign/。

这个例子代表 gporetro

p:before{
  content:'\002b';
}

/*Code from responsive.css*/
p{
font-size: 30px;
font-weight: 700;
color: black;
padding: 5px 20px;
position: static;
cursor: pointer;
float: right;
}

<p></p>

这是一个使用 cloudflare CDN 引导程序的示例，供您比较：

/*Code from responsive.css*/
.glyphicon-plus{
font-size: 30px;
font-weight: 700;
color: black;
padding: 5px 20px;
position: static;
cursor: pointer;
float: right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />

<span class="glyphicon glyphicon-plus"></span>

Answer 3

glyphicon 字体未在 gporetro.com 上正确加载。

404 未找到http://gporetro.com/fonts/glyphicons-halflings-regular.ttf

所以它使用默认字体。

如果你想要相同的图标渲染，你只需要强制使用与 gporetro 相同的字体：

span {
    font-size: 30px;
}

.glyphicon-plus:before {
    font-family: "Times New Roman";
    font-weight: 700;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />

<span class="glyphicon glyphicon-plus"></span>