用户 Ionicons 电子邮件未读

Question

我正在尝试使用本网站上 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"，它就可以正常工作。

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

Answer 1

怎么了

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

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

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

解决方案

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

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

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

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

替代解决方案

你会发现，邮件和邮件未读图标设计得不是很好，因为未读版本是基于整个宽度居中的，包括信封角上的点，这导致图标当它从电子邮件更改为电子邮件未读时略有变化，反之亦然。

为了克服这种轻微的麻烦，我建议您在选项卡上使用徽章来指示未读内容。就像将 badge="1" 添加到 ion-tab 元素以指示 1 条未读消息一样简单。而且它看起来也更原生。 Here's and image.

用户 Ionicons 电子邮件未读

User Ionicons email-unread

tabs

icons

ionic

symbols

ionicons

怎么了

解决方案

替代解决方案