Twitter Bootstrap Question posted in

Is bootstrap 3.3.6 plus icon changed? – Twitter bootstrap

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.

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0
    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 is02b' – http://htmlarrows.com/math/plus-sign/.

    This example represents gporetro

    p:before{
  content:'02b';
}

/*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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search