1

我正在尝试在此网站上使用 Ionic 的图标：http: //ionicons.com/

这是“ion-email-unread”，不知何故，这多个其他图标不起作用。当我打电话给他们时，他们简单地不显示。没有错误消息。

我的代码如下所示：

<ion-tabs class="tabs-icon-top {{footerClass}}">

    <!-- Home Tab -->
    <ion-tab title=" Home " icon="icon ion-home " href="#/tab/home ">
        <ion-nav-view name="tab-home "></ion-nav-view>
    </ion-tab>

    <!-- Chat Tab -->

    <ion-tab title="Chat {{emailIcon}}" icon="ion-email-unread"  href="#/tab/chat-master ">
        <ion-nav-view name="tab-chat-master "></ion-nav-view>
    </ion-tab>


    <!-- Coins Tab -->
    <ion-tab title="Coins " icon="icon ion-social-usd " href="#/tab/coins ">
        <ion-nav-view name="tab-coins "></ion-nav-view>
    </ion-tab>

    <!-- Settings Tab -->
    <ion-tab title="Settings " icon="icon ion-ios7-gear " href="#/tab/settings ">
        <ion-nav-view name="tab-settings "></ion-nav-view>
    </ion-tab>
</ion-tabs>

如果我输入代表不同符号的 icon="ion-email" ，它就可以正常工作。

你能帮我找到我的问题吗？

4

1 回答 1

4

怎么了

Ionic 框架似乎运行在旧版本的 Ionicons 上。如果您查看 ionic 的 css 文件，css/ionic.app.css然后转到第 548 行，您可能会看到以下内容：

.ion-email-unread:before {
  content: "\f3c3"; }

不幸的是，这种情况并非如此。我尝试手动添加该片段，看起来字体本身实际上还没有电子邮件未读图标。

解决方案

在 Ionic 更新它包含在框架中的 Ionicons 之前，您可以执行以下操作：

  1. 前往Ionicons Repo并直接下载。
  2. 将内容复制到您的www/lib文件夹。
  3. 通过将以下内容添加到现有包含下的 index.html 中，将新的 Ionicons css 包含到您的应用程序中ionic.app.css。

<link href="lib/ionicons/css/ionicons.css" rel="stylesheet">

这应该可以解决您未显示电子邮件未读图标的问题。

替代解决方案

您会发现一件事是电子邮件和电子邮件未读图标设计得不是太大，因为未读版本基于包括信封角上的点在内的整个宽度居中，这会导致图标在显示时略微移动从电子邮件更改为电子邮件未读，反之亦然。

为了克服这种轻微的麻烦，我建议在您的标签上使用徽章来指示未读的内容。就像badge="1"在ion-tab元素中添加 以指示 1 条未读消息一样简单。它看起来也更原生。这是和图像。

于 2015-01-21T07:55:27.867 回答