角度 ui-grid 排序图标无法正确显示

Posted 2023-03-06

【中文标题】角度 ui-grid 排序图标无法正确显示

【英文标题】：angular ui-grid sort icons do not display correctly

【发布时间】：2015-09-17 15:01:58

【问题描述】：

我已经研究并尝试将所有字体文件（ui-grid.eot、ui-grid.svg、ui-grid.ttf、ui-grid.woff）放在与 ui-grid-unstable 相同的目录中.css。不管我做什么，韩国人的角色仍然出现！

我也在 Firefox 中得到

可下载字体：下载失败（字体系列：“ui-grid”样式：正常粗细：正常拉伸：正常 src 索引：1）：状态=2147500037 来源：file:///C:/webapp/css/lib/angular/css/ui-grid.woff app.css 可下载字体：下载失败（字体系列：“ui-grid”样式：正常重量：正常拉伸：正常 src 索引：2）：状态 = 2147500037 来源：file:///C:/webapp/css/lib/angular/css/ui-grid.ttf

我也不使用任何类型的构建机制（凉亭等）

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

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

【问题讨论】：

有什么方法可以提供文件结构的截图？

针对文件结构进行了编辑

帮我一个忙，把 js 文件夹中的 ui-grid-unstable.js 和所有其他文件（eot、svg 等）一起放入你的 css 文件夹中。调整 ui-grid-unstable.js 引用，使其正确并尝试。

其实试过了还是不行:(

chat.***.com/rooms/82011/angular-ui-grid-sort-icons

【参考方案1】：

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

引用了最新的

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

它成功了！

奇怪的是，如果我从该链接复制并粘贴代码并将其粘贴到我本地的 ui-grid-unstable.css 中，这些字符仍然是韩式字符...

【参考方案2】：

一个不错且可行的解决方案是替换 css 文件中的代码，如下所示：

.ui-grid-icon-down-dir:before 
  content: '\25bc';

.ui-grid-icon-up-dir:before 
  content: '\25b2';

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

【参考方案3】：

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

 <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 类替换为“ui-grid-icon-up-dir”作为向上图标和“ui-grid-icon-down-dir”作为向下图标。

【参考方案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 个文件。 希望这会有所帮助。