Question: I am using UI-Grid, part of the AngularUI suite, but I want to switch out some of the glyphicons they use, in particular the arrows for sorting columns.

Everywhere else, I use Bootstrap's glyphicon-chevron-down or glyphicon-chevron-up on my custom tables. So basically I just want to override the UI-Grid sorting icons with the Bootstrap ones. Is there any way to do this? I've tried overriding the UI-grid sorting classes in my CSS but it doesn't seem to have any effect... maybe I'm doing it wrong though.

Here is what the Bootstrap classes look like:

```
.glyphicon-chevron-up:before {
  content: "\e113";
}
.glyphicon-chevron-down:before {
  content: "\e114";
}

```

Here is what the UI-grid classes look like:

```
.ui-grid-icon-sort-alt-up:before {
  content: '\c360';
}

.ui-grid-icon-sort-alt-down:before {
  content: '\c361';
}

```

So in my web-app's CSS file I did this:

```
.ui-grid-icon-sort-alt-up:before {
  content: '\e113';
}

.ui-grid-icon-sort-alt-down:before {
  content: '\e114';
}

```

This might be totally crazy, I have no idea how this stuff works under the hood.

Answer: 
Angular UI's Bootstrap addition is only reformatting the original bootstrap JS into Angular directives. It doesn't include glyphicons. If you add the fully angular-boostrap, you'll get what you are looking for.

You could also just download the glyphicons from bootstrap directly and put this code into your stylesheet or scss partial somewhere:

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

```
You can override css based on how you arrange your `<link>` tags at the head of your html. For example:

```
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/override.css" />

```

Moving your css after bootstrap will allow your css to "overide" bootstrap's css.