Question

我正在使用UI-Grid，它是AngularUI套件的一部分，但我想切换出他们使用的一些glyphicons，特别是用于排序列的箭头。

在其他地方，我在我的自定义表格上使用Bootstrap的glyphicon-chevron-down或glyphicon-chevron-up。所以基本上我只想用Bootstrap覆盖UI-Grid排序图标。有没有办法做到这一点？我已经尝试覆盖我的CSS中的UI网格排序类，但它似乎没有任何影响...也许我做错了。

这是Bootstrap类的样子：

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

这是UI网格类的样子：

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

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

所以在我的网络应用程序的CSS文件中，我这样做了：

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

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

这可能是完全疯狂的，我不知道这些东西是如何起作用的。

Answer 1

Angular UI的Bootstrap添加只是将原始引导程序JS重新格式化为Angular指令。它不包括glyphicons。如果你添加完全角度 - 增强剂，你将获得你想要的东西。

您也可以直接从bootstrap下载glyphicons并将此代码放入样式表或scss partial of 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');
}

Answer 2

您正在正确更改content，但您遗漏了一些glyphicon使用的其他属性，最重要的是font-family。

每当将.glyphicon类添加到元素时，它都会添加以下内容：

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

因此，您可能希望复制这些属性，因为.ui-grid-icon-sort-alt-up可能没有.glyphicon。

我建议您将这样的内容添加到自定义CSS中：

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

为了解释这里发生了什么，Glyphicon正在使用一个自定义字体，其中包含一组用于各种Unicode字符的图标。 \e114是对他们创建的字体中特定字符的引用。

Answer 3

您可以根据您在html头部排列<link>标记的方式来覆盖css。例如：

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

在bootstrap之后移动你的css将允许你的css“覆盖”bootstrap的css。

更改特定的glyphicon？

3 个答案: