Bootstrap 3: Can the Glyphicons Be Stacked Like Font Awesome's Icons

Bootstrap 3: Can the Glyphicons be stacked like Font Awesome's icons?

Bootstrap's CSS for Glyphicons don't have classes to stack. You could apply the classes from your example code: http://bootply.com/88775

css

.icon-stack {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    position: relative;
    vertical-align: -35%;
    width: 2em;
}
.icon-stack .icon-stack-base {
    font-size: 2em;
}
.icon-stack [class^="icon-"], .icon-stack [class*=" icon-"] {
    display: block;
    font-size: 1em;
    height: 100%;
    line-height: inherit;
    position: absolute;
    text-align: center;
    width: 100%;
}
.icon-stack .glyphicon{
    font-size: 2em;
}
.glyphicon-ban-circle
{
    color:red;
}

html

<span class="icon-stack">
<i class="glyphicon glyphicon-phone icon-stack-base"></i>
<i class="glyphicon glyphicon-ban-circle"></i>
</span>

Bootstrap 3 without Glyphicons replaced with Font Awesome

Those 6 remaining Glyphicons references in the compiled CSS are regarding the optional use of Glyphicons for the next+prev buttons in the Carousel component. Since the declarations in question are also used for the non-Glyphicon next+prev buttons and represent an absolutely trivial amount of the total file size, I suggest simply ignoring them. For all practical purposes, you've already eliminated Glyphicons from your build.

If you absolutely must annihilate said references, then compile Bootstrap manually, beforehand removing the offending lines from bootstrap/less/carousel.less and removing the @import "glyphicons.less"; line from bootstrap/less/bootstrap.less.

Or you can just manually edit the CSS that the Bootstrap Customizer already generated for you, since the relevant deletions are trivial.

Stack bootstrap glyphicons

Another icon package called font-awesome has better flexibility and feature of stacking icons together. Bootstrap 3 containing Glyphicons don't have much options so I took out the CSS from font-awesome and adopted it for Glyphicon.

The HTML looks like:

<span class="glyphicon-stack">
<i class="glyphicon glyphicon-circle glyphicon-stack-2x"></i>
<i class="glyphicon glyphicon-plus glyphicon-stack glyphicon-stack-1x"></i>
</span>

The main CSS:

.glyphicon-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}

.glyphicon-circle{
position: relative;
border-radius: 50%;
width: 100%;
height: auto;
padding-top: 100%;
background: black;
}

.glyphicon-stack-1x {
line-height: inherit;
}

.glyphicon-stack-1x, .glyphicon-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}

For the styling of the icons (color, size), you can create more css class properties and add to the respective icons.

Have a look at this example.

Bootstrap 3 - Glyphicon and Font Awesome together? possible?

I use both within my projects without any issues.
they use different prefixes also with fa- for font awesome and glyphicon- for the glyphicons.

I guess the only down side is the extra loading of additional fonts etc.

Hope that helps.

How to replace Glyphicons with FontAwesome in Bootstrap 3 without changing HTML?

You can use the following approach to overload Glyphicon CSS classes with FontAwesome ones using SCSS:

// Overloading "glyphicon" class with "fa".
.glyphicon {

    @extend .fa;

    // Overloading "glyphicon-chevron-left" with "fa-arrow-left".
    &.glyphicon-chevron-left {
        @extend .fa-chevron-left;
    }

    // Overloading "glyphicon-chevron-right" with "fa-arrow-right".
    &.glyphicon-chevron-right {
        @extend .fa-chevron-right;
    }
}

This solution is based on code of Steven Clontz.

Make sure, that FontAwesome SCSS is imported before this overrides.

In the above example I'm overloading the following two Glyphicons: chevron-left and chevron-right with the following FontAwesome icons: arrow-left and arrow-right respectfully.

You will need to overload all icons used in third-party components to achieve what you need.

However, consider this as a HACK and DO NOT overload ALL icons, cause it will make your CSS unnecessarily bigger!

Consider persuading your third-party vendor to implement support for different icon libraries. This will be a proper solution.

Creating Custom Glyphicons Icon/Font on Bootstrap 3

You will need to add an entry for .icon-xoo in bootstrap/less/glyphicons.less and change the value of the Less variable @icon-font-name to "icon-xoo". You should put the font files in ../fonts/ (relative to your bootstrap.css).

Using a Glyphicon as an LI bullet point (Bootstrap 3)

This isn't too difficult with a little CSS, and is much better than using an image for the bullet since you can scale it and colour it and it will keep sharp at all resolutions.

1. Find the character code of the glyphicon by opening the Bootstrap docs and inspecting the character you want to use.

   

2. Use that character code in the following CSS

   li {
       display: block;
   }
   
   li:before {
       /*Using a Bootstrap glyphicon as the bullet point*/
       content: "\e080";
       font-family: 'Glyphicons Halflings';
       font-size: 9px;
       float: left;
       margin-top: 4px;
       margin-left: -17px;
       color: #CCCCCC;
   }
   

   You may like to tweak the colour and margins to suit your font size and taste.

View Demo & Code

How do Bootstrap Glyphicons work?

In Bootstrap 2.x, Glyphicons used the image method - using images as you mentioned in your question.

The drawbacks with the image method was that:

• You couldn't change the color of the icons
• You couldn't change the background-color of the icons
• You couldn't increase the size of the icons

So instead of glyphicons in Bootstrap 2.x, a lot of people used Font-awesome, as this used SVG icons which did not have such limitations.

In Bootstrap 3.x, Glyphicons use the font method.

Using a font to represent an icon has advantages over using images:

• Scalable - works nicely regardless of client device's resolution
• Can change the colour with CSS
• Can do everything traditional icons can (e.g. change opacity, rotation, etc.)
• Can add strokes, gradients, shadows, and etc.
• Convert to text (with ligatures)
• Ligatures are read by screen readers
• Changing icons to fonts is as simple as changing the font-family in CSS

You can see what you can do with the font method for icons here.

So in the Bootstrap distribution, you can see the glyphicon font files:

fonts\glyphicons-halflings-regular.eot
fonts\glyphicons-halflings-regular.svg
fonts\glyphicons-halflings-regular.ttf
fonts\glyphicons-halflings-regular.woff

The Bootstrap CSS refers to the glyphicon font like so:

@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.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

And the CSS links to this font using the .glyphicon base class (note the font-family):

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  ...
}

And then each glyphicon uses an individual icon class which refers to a Unicode reference within the Glyphicon Halflings font, e.g.:

.glyphicon-envelope:before {
  content: "\2709";
}

This is why you must use the base .glyphicon class as well as the individual icon class against the span element in Bootstrap 3:

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

---

Related Topics