bootstrap3.3.6加号图标变了吗？

Question

当我使用 bootstrap 加号图标时，它很粗。例如。

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>

如您所见，加号图标很粗，但在某些使用 bootstrap 的网站上，我发现相同的加号图标很细，例如http://gporetro.com/ 手机上的菜单有细长的加号图标，字体大小相同。

现在bootstrap3.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;
}

尽管如此，我自己现在对它如何在片段 window 中显示更薄的加号感到困惑，而没有链接特定的 CSS 文件。编辑：正如另一个答案中所解释的，字体文件本身丢失了，所以它又回到了另一个 + 号。

Answer 2

css 覆盖 responsive.css
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，而在 bootstrap 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 加号代码，每个加号是 [=16=]2b' - http://htmlarrows.com/math/plus-sign/.

这个例子代表 gporetro

p:before{
  content:'[=12=]2b';
}

/*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的bootstrap的例子供大家比较：

/*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 Not Found 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>

bootstrap3.3.6加号图标变了吗？

Is bootstrap 3.3.6 plus icon changed?

css

icons

twitter-bootstrap

glyphicons

twitter-bootstrap-3

这个例子代表 gporetro

这里有一个使用cloudflare CDN的bootstrap的例子供大家比较：