更改特定的字形图标？

Question

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

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

这是 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

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

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

将您的 css 移到 bootstrap 之后将使您的 css 变为 "overide" bootstrap 的 css。

Answer 2

您正在正确更改 content，但是您缺少一些 glyphicon 使用的附加属性，最重要的是 font-family.

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

.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

Angular UI 的 Bootstrap 添加只是将原始的 bootstrap JS 重新格式化为 Angular 指令。它不包括字形。如果你添加完整的 angular-boostrap，你会得到你正在寻找的东西。

您也可以直接从 bootstrap 下载字形并将此代码放入您的样式表或 scss 部分中的某个地方：

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

更改特定的字形图标？

Changing a specific glyphicon?

css

twitter-bootstrap

angular-ui-grid