Question

当我使用bootstrap plus icon时，它很厚。例如。

＆＃13;

     final static String SELECTION =
            (Utils.hasHoneycomb() ? Contacts.DISPLAY_NAME_PRIMARY : Contacts.DISPLAY_NAME) +
                    "<>''" + " AND " + Contacts.IN_VISIBLE_GROUP + "=1";

＆＃13;

span {
  font-size: 30px;
}

＆＃13;

正如你所看到的加号图标很厚但是在一些使用bootstrap的网站上我发现相同的加号图标很薄，例如移动设备上的http://gporetro.com/菜单具有相同的30px字体大小的超薄图标。

引导程序3.3.6加上图标现在变得更厚了吗？
如何使用相同的旧稀释剂加图标？

感谢。

Answer 1

在responsive.css上有一些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，你会在获取文件的bootstrap CDN上获得404。我用.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的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 2

在我看来他们正在使用自定义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;
}

虽然，我现在很困惑它在片段窗口中如何显示更薄的加号，而没有链接特定的CSS文件。编辑：正如在另一个答案中所解释的那样，字体文件本身缺失，因此它会回落到另一个+符号。

Answer 3

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

404 Not Found http://gporetro.com/fonts/glyphicons-halflings-regular.ttf

所以它是默认字体的后备。

如果你想拥有相同的图标渲染，你必须强制使用与gporetro相同的字体：

＆＃13;

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

＆＃13;

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

＆＃13;

引导程序3.3.6加上图标是否已更改？

3 个答案:

此示例代表gporetro

以下是使用来自cloudflare CDN的bootstrap进行比较的示例：