Is bootstrap 3.3.6 plus icon changed?

Question

When I use bootstrap plus icon it is thick. E.g.

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>

As you can see the plus icon is thick but on some website who use bootstrap I found the same plus icon to be thin e.g. http://gporetro.com/ menu on mobile has thin plus icon with same 30px font-size.

• Is bootstrap 3.3.6 plus icon now changed to be thicker?
• How can I use the same old thinner plus icon?

Thanks.

Answer 1

1. There is some css overwrite on responsive.css
2. gporetro.com is missing the icons font files.

---

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

Bootstrap has the following instruction.

@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');

}

If you check the URL for the font files on gporetro you will get 404 while on bootstrap CDNs you get the files. I'm exemplifying with .eot but it's true for all extensions.

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

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

Note: the base css is located on the following locations:

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

You might be asking, how it renders the + sign then? It's because glyphicon use the default HTML code for a plus sign each is\002b' - http://htmlarrows.com/math/plus-sign/.

This example represents 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>

Here is an example using bootstrap from cloudflare CDN for you to compare:

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