【问题标题】：User Ionicons email-unread用户 Ionicons 电子邮件未读
【发布时间】：2015-03-16 18:32:44
【问题描述】：

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

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

【问题讨论】：

标签： tabs icons ionic symbols ionicons

【解决方案1】：

怎么了

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

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

不幸的是，情况并非如此。我尝试手动添加该 sn-p，但似乎字体本身实际上还没有电子邮件未读图标。

解决方案

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

前往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.

【讨论】：