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: 
You're changing the `content` correctly, but you are missing some additional properties that glyphicon uses, most importantly being the `font-family`.

Whenever the `.glyphicon` class is added to an element it adds the following:

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

```

So you will want to replicate those properties as well since your `.ui-grid-icon-sort-alt-up` likely does not have `.glyphicon` on it.

I would recommend adding something like this to your custom CSS as well:

```
.ui-grid-icon-sort-alt-up,
.ui-grid-icon-sort-alt-down {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: "Glyphicons Halflings";
    /* ... */
}

```

To explain what is going on here, Glyphicon is using a custom font that has a bunch of icons for various Unicode characters. `\e114` is a reference to a specific character in the font that they created.
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.