2

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.

user31782
  • 7,087
  • 14
  • 68
  • 143

3 Answers3

3
  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>
Vinicius Santana
  • 3,936
  • 3
  • 25
  • 42
  • Thanks for explaining. I have one more question. When I remove font-family `Glyphicon Halfings` on gporetro devtools why does plus sign become a little thicker? If `glyphicon halfing` has not been loaded then shouldn't font family automatically fall back to other value? – user31782 Dec 09 '16 at 10:04
  • It's because when you remove font-family Glyphicon Halfings it fall back to "Helvetica Neue", Helvetica, Arial, sans-serifbody" as cascade of CSS kicks in. If you don't remove Glyphicon the browser stills trys to load it and when it doesnt find the font file, it's up to the engine to decide what to do as there is no fallback and it won't look in the css for the next fall back . Ready this for a good explanation. http://stackoverflow.com/questions/29241764/how-do-web-browsers-implement-font-fallback – Vinicius Santana Dec 09 '16 at 16:35
  • I found that with bootstrap cdn if I give manually a wrong font-family like `font-family : Jhinga lala glyph` then I have the same tinner plus icon. Because font family doesn't have a fallback the text engine uses it's algorithm to make thinner plus icon. – user31782 Dec 10 '16 at 07:46
1

Looks to me they are using custom CSS.

span {
  font-size: 30px;
}
<link href="http://gporetro.com/css/bootstrap.css" rel="stylesheet" />

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

You can also find this in their "responsive.css" file.

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

Although, I'm confused now myself on how it showed a thinner plus in the snippet window, without linking that specific CSS file. Edit: As explained in the other answer, the font file itself is missing, so it falls back to another + sign.

Nimesco
  • 688
  • 4
  • 13
  • No Both http://gporetro.com/css/bootstrap.css and https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css have no difference. I compared both of them in sublime editor. – user31782 Dec 09 '16 at 08:09
  • Does same bootstrap css behave differently if it is not on cdn? – user31782 Dec 09 '16 at 08:11
  • I just found they have some custom CSS in responsive.css file. – Nimesco Dec 09 '16 at 09:08
  • 1
    The reason you got the thinner plus is because on your snippet CSS you are not mentioning font-weight and so you get the default value each is 400 / normal while on the responsive.css the font-weight is 700 / bold. – Vinicius Santana Dec 09 '16 at 09:41
1

The glyphicon font is not properly loaded at gporetro.com.

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

So it is fallbacking on the default font.

You just have to force to use the same font as gporetro if you want to have the same icon rendering:

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>
Seb33300
  • 7,464
  • 2
  • 40
  • 57