Remove Glyphicons from Bootstrap

Remove Glyphicons from Bootstrap

I'm going to assume that you're not building Bootstrap with the LESS or SASS code base and are downloading the whole library pre-built. If so, go to Bootstrap's customize page and uncheck any components that you don't want, i.e. Glyphicons, then download the new source.

A lot of the online font library tools, I like to use Fontello myself, will allow you to select just the icons you want and create an icon font from that. Not only do they create the icon font but will also provide the CSS to include the font into your project, it will look something like this:

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

// Catchall baseclass
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Individual icons
.glyphicon-asterisk               { &:before { content: "\2a"; } }
.glyphicon-plus                   { &:before { content: "\2b"; } }
/* ... more icons ... */
/* ... more icons ... */
/* ... more icons ... */
.glyphicon-menu-down              { &:before { content: "\e259"; } }
.glyphicon-menu-up                { &:before { content: "\e260"; } }

Now simply include the font CSS into your main CSS stylesheet. If you have any additional questions about including/embedding an icon font I would Google "How to include font icon".

Show glyphicon-remove Bootstrap when the text is inserted

Here is a JQuery solution for your problem. please use the CSS and JQuery to build your element. I am using the same glyphicon for both side, please use the correct one.

$('.custom-input > input').on('keyup', function() {  if ($(this).val()) {    $(this).siblings('span').show();  }else{    $(this).siblings('span').hide();  };})

.custom-input {  position: relative;}
.custom-input > input {  padding: 0px 17px;}
.custom-input > span:nth-of-type(1) {  position: absolute;  left: 3px;  height: 14px;  top: calc(50% - 7px);  display: none;}
.custom-input > span:nth-of-type(2) {  position: absolute;  right: 3px;  height: 14px;  top: calc(50% - 7px);  display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script><div class="btn-group custom-input">  <span class="glyphicon glyphicon-remove" id="search-bar-icon-clear"></span>  <input type="text" class="search-input" placeholder="Search...">  <span class="glyphicon glyphicon-remove" id="search-bar-icon-clear"></span></div>

remove bootstrap glyphicons from bootstrap css

In stead of importing the bootstrap-sass/assets/stylesheets/bootstrap
just create a custom file in whitch you import evrything without glyphicon like this

Content of the bootstrap-sass/assets/stylesheets/bootstrap is like this and I put some modification on the line where glyphicon is import

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";

// Here is where the glyphicons are import
// I comment just this line and every thing will work like you want without the glyphicons
//@import "bootstrap/glyphicons"; 

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

```

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.

Remove Glyphicons from Laravel 5.4

Glyphicons is included in bootstrap-sass that is installed through npm.
so If you want to remove the glyphicons you would have to remove the require('boostrap-sass') at your bootstrap.js file.

Or if you really want to remove only the fonts then you remove the

node_modules/bootstrap-sass/assets/fonts/bootstrap

directory but this will probably show an error that is glyphicons is not located.

To fix the error above you should go to

node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss

file and remove this code

@import "bootstrap/glyphicons";

The problem with this solution is probably after you have done all those stuffs and you update your dependencies using npm run update then all the things you have deleted will be updated to the latest bootstrap-sass dependency unless you have removed bootstrap-sass dependency in your package.json

"devDependencies": {
    "bootstrap-sass": "^3.3.7",
  },

Why glyph icons were taken off in bootstrap 4

There's a question about this on the Bootstrap repo. Quote:

While icon fonts in general do have some issues, I don't recall that
being the primary consideration for dropping them. The more pressing
concern was that (A) some folks don't need/want icons (B) many folks
were using other icon fonts (such as Font Awesome); for folks in these
circumstances, Bootstrap including its own icon font led to
unnecessary bloat. Plus, dedicated icon font projects could do a
better job than us.

I'd recommend using Font Awesome for icons, as:

• it has almost 700 icons (v 4.7.0)
• it has good docs
• it is actively developed

bootstrap glyphicon isn't showing on buttons

Setup your fonts folder on the same level as your css folder, where bootstrap is located, and put the glyphicon fonts there. Then find the following lines in your bootstrap css file and make sure they also point to the font folder.

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

How to disable the clickable property for Bootstrap glyphicons?

Don't use a, instead use something like span or i. Style the span the way you like.

HTML:

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

HTML icon in a:

<a href="#"><span class="glyphicon glyphicon-wrench"></span> Link with icon</a>

CSS:

a span { your style }

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;
}

---

Related Topics