angular ui-网格排序图标显示不正确

Question

我已经研究并尝试放置所有字体文件 (ui-grid.eot, ui-grid.svg, ui-grid.ttf, ui-grid.woff) 与ui-grid-unstable.css同目录。无论我做什么，韩式角色仍然出现！

我也在 firefox 中得到

downloadable font: download failed (font-family: "ui-grid" style:normal weight:normal stretch:normal src index:1): status=2147500037 source: file:///C:/webapp/css/lib/angular/css/ui-grid.woff app.css downloadable font: download failed (font-family: "ui-grid" style:normal weight:normal stretch:normal src index:2): status=2147500037 source: file:///C:/webapp/css/lib/angular/css/ui-grid.ttf

我也不使用任何类型的 build 机制（bower 等）

有什么办法可以让图标正常显示吗？或者喜欢某种解决方法

---mainDir --css --app.css --images --js --controllers --controller1.js -controller2.js etc. --services --app.js etc --lib --angular --css --ui-grid.eot --ui-grid.svg --ui-grid.ttf --ui-grid.woff --ui-grid-unstable.css --js --angular.min.js --angular-route.min.js --ui-grid-unstable.js --bootstrap -css -fonts -js --jquery -js --views --view1.html --view2.html etc. index.html

Answer 1

在您的 project.follow 中找不到字体 uri 路径，文件夹结构与 git 中的相同。如果您仍然面临同样的问题，请使用更新的 angular ui 网格版本。自定义列 header 模板是解决排序图标问题的另一种方法。这是默认的 header 模板代码：

 <div ng-class="{ 'sortable': sortable }">

  <div class="ui-grid-cell-contents" col-index="renderIndex" title="TOOLTIP">
    <span>{{ col.displayName CUSTOM_FILTERS }}</span>

    <span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }">
      &nbsp;
    </span>
  </div>

  <div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false" ng-click="toggleMenu($event)" ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}">
    <i class="ui-grid-icon-angle-down">&nbsp;</i>
  </div>

  <div ui-grid-filter></div>
</div>

在默认模板中，将您自己的 css class 替换为 'ui-grid-icon-up-dir' 用于向上图标，'ui-grid-icon-down-dir' 用于向下图标。

Answer 2

原来这个问题是特定于 ui-grid-unstable.css 版本的。使用

引用最新的

<link href="http://ui-grid.info/release/ui-grid-unstable.css" rel="stylesheet">

成功了！

奇怪的是，如果我从那个 link 复制并粘贴代码并将其粘贴到我的本地 ui-grid-unstable.css，字符仍然是韩文外观...

Answer 3

一个不错的解决方案是像这样替换 css 文件中的代码：

.ui-grid-icon-down-dir:before {
  content: 'bc';
}
.ui-grid-icon-up-dir:before {
  content: 'b2';
}

原内容'\c358'和'\c359'会在IE中显示韩文

Answer 4

您需要进入版本文件夹，下载以下文件：

ui-grid.eot
ui-grid.svg
ui-grid.ttf
ui-grid.woff

并放置在存储 ui-grid.css 文件的同一本地文件夹中。

例如如果您使用的是 ui-grid.js 和 ui-grid.css 版本 4.0.4，您需要从

下载上述文件

https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release/4.0.4

并放置在存储 ui-grid.css 文件的同一本地文件夹中。您不需要在代码中明确引用这 4 个文件。希望这有帮助。

angular ui-网格排序图标显示不正确

angular ui-grid sort icons do not display correctly

html

javascript

css

angularjs

angular-ui-grid