Question

我从示例网站复制了一个工具栏，但没有显示任何字形图标。我可以确认相同的svg图标在非控件中工作。

字形不起作用的工具栏代码。

<template>
  <ui-page page-title="Toolbars" animate>
    <style>
      .example-container {
        position: relative;
        height: 450px;
        border: 1px solid #f0f0f0;
      }

    </style>
    <ui-content padded scroll>
      <ui-container>

        <ui-toolbar primary>
          <ui-input-group>
            <ui-input width="12em">
              <ui-input-addon glyph="icon-fill-search"></ui-input-addon>
            </ui-input>
            <ui-dropdown value="0">
              <ui-list-item value="0">Site</ui-list-item>
              <ui-list-item value="1">Posts</ui-list-item>
              <ui-list-item value="2">Docs</ui-list-item>
            </ui-dropdown>
          </ui-input-group>
          <ui-filler></ui-filler>
          <ui-button-group>
            <ui-button small light square glyph="icon-moon-undo2"></ui-button>
            <ui-button small light square glyph="icon-moon-redo2"></ui-button>
          </ui-button-group>
          <ui-button small light square glyph="icon-moon-cog" dropdown.bind="btnMenu"></ui-button>
          <ui-divider></ui-divider>
          <ui-button light>Save</ui-button>
          <ui-button light>Cancel</ui-button>
        </ui-toolbar>
        <br/>
        <ui-menu ref="btnMenu">
          <ui-menu-section>Actions</ui-menu-section>
          <ui-menu-item glyph="icon-moon-pencil">Edit</ui-menu-item>
          <ui-menu-item glyph="icon-moon-search">Search</ui-menu-item>
          <ui-menu-item glyph="icon-moon-bin">Delete</ui-menu-item>
          <ui-menu-section>Options</ui-menu-section>
          <ui-menu-item glyph="icon-moon-alarm">Notifications</ui-menu-item>
          <ui-menu-item glyph="icon-moon-cog">Settings</ui-menu-item>
        </ui-menu>
      </ui-container>
    </ui-content>
  </ui-page>
</template>

非控制字形的工作原理如您在选择字形页面时所看到的，然后当您选择Hello页面时，您可以看到工具栏缺少字形。 - ＆GT;

见图片：

Answer 1

你能否检查icomoon svg文件是否已加载，默认情况下框架中包含前缀为glyph-的图标，但是appom文件中需要包含icomoon和hawcons的额外图标

<compose view="../glyphs/icomoon.svg"></compose>
<compose view="../glyphs/hawcons-linear.svg"></compose>
<compose view="../glyphs/hawcons-filled.svg"></compose>

https://github.com/adarshpastakia/aurelia-ui-framework/blob/master/src/app.html

是否需要为glyph svg图标设置根路径以在控件中工作？

1 个答案: