Stack Bootstrap Glyphicons

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: 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>

Add Glyphicon to Every Button (bootstrap 3.5)

I thing you might wants above image Output for your all the buttons.

For that you need to just write simple css :after class css to apply on all default buttons after text:

.btn-default:after {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    vertical-align: middle;
    padding: 6px 5px;
    color: #0099FF;
}

this will work for your all buttons as shown in image.

Bootstrap 4 - Glyphicons migration?

You can use both Font Awesome and Github Octicons as a free alternative for Glyphicons.

Bootstrap 4 also switched from Less to Sass, so you might integerate the font's Sass (SCSS) into you build process, to create a single CSS file for your projects.

Also see https://getbootstrap.com/docs/4.1/getting-started/build-tools/ to find out how to set up your tooling:

1. Download and install Node, which we use to manage our dependencies.
2. Navigate to the root /bootstrap directory and run npm install to install our local dependencies listed in package.json.
3. Install Ruby, install Bundler with gem install bundler, and finally run bundle install. This will install all Ruby dependencies, such as Jekyll and plugins.

Font Awesome

1. Download the files at https://github.com/FortAwesome/Font-Awesome/tree/fa-4
2. Copy the font-awesome/scss folder into your /bootstrap folder

3. Open your SCSS /bootstrap/bootstrap.scss and write down the following SCSS code at the end of this file:

   $fa-font-path: "../fonts";
@import "../font-awesome/scss/font-awesome.scss";

4. Notice that you also have to copy the font file from font-awesome/fonts to dist/fonts or any other public folder set by $fa-font-path in the previous step

5. Run: npm run dist to recompile your code with Font-Awesome

Github Octicons

1. Download the files at https://github.com/github/octicons/
2. Copy the octicons folder into your /bootstrap folder

3. Open your SCSS /bootstrap/bootstrap.scss and write down the following SCSS code at the end of this file:

   $fa-font-path: "../fonts";
@import "../octicons/octicons/octicons.scss";

4. Notice that you also have to copy the font file from font-awesome/fonts to dist/fonts or any other public folder set by $fa-font-path in the previous step

5. Run: npm run dist to recompile your code with Octicons

Glyphicons

On the Bootstrap website you can read:

Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

As I understand you can use these 250 glyphs free of cost restricted for Bootstrap but not limited to version 3 exclusive. So you can use them for Bootstrap 4 too.

1. Copy the fonts files from: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
2. Copy the https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss file into your bootstrap/scss folder
3. Open your scss /bootstrap/bootstrap.scss and write down the following SCSS code at the end of this file:

$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";

4. Run: npm run dist to recompile your code with Glyphicons

---

Notice that Bootstrap 4 requires the post CSS Autoprefixer for compiling. When you are using a static Sass compiler to compile your CSS you should have to run the Autoprefixer afterwards.

You can find out more about mixing with the Bootstrap 4 SCSS in here.

You can also use Bower to install the fonts above. Using Bower Font Awesome installs your files in bower_components/components-font-awesome/ also notice that Github Octicons sets the octicons/octicons/octicons-.scss as the main file whilst you should use octicons/octicons/sprockets-octicons.scss.

All the above will compile all your CSS code including into a single file, which requires only one HTTP request. Alternatively you can also load the Font-Awesome font from CDN, which can be fast too in many situations. Both fonts on CDN also include the font files (using data-uri's, possible not supported for older browsers). So consider which solution best fits your situation depending on among others browsers to support.

For Font Awesome paste the following code into the <head> section of your site's HTML:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Also try Yeoman generator to scaffold out a front-end Bootstrap 4 Web app to test Bootstrap 4 with Font Awesome or Github Octicons.

How to change inner color of glyphicons in Bootstrap?

A glyphicon is like a character. You can change it's color by changing the color property of the span style.

<button type="button" class="btn btn-default btn-lg" id="refresh">
   <span class="glyphicon glyphicon-star-empty"></span>
</button>

.glyphicon-star-empty {
   color: yellow;
}

However, the icon you picked is not full, so you can't change the inside as you asked. I would recommend using the "glyphicon glyphicon-star" instead.

<button type="button" class="btn btn-default btn-lg" id="refresh">
   <span class="glyphicon glyphicon-star"></span>
</button>

.glyphicon-star {
   color: yellow;
}

Bootstrap css use only glyphicons

Simply go to Bootstrap's Customization page at http://getbootstrap.com/customize and untick everything apart from Glyphicons. This will give you a ZIP folder with everything you need for the Glyphicons and nothing more.

---

Related Topics