用户Ionicons电子邮件未读

Question

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

这是"离子电子邮件未读"不知何故，这是其他多个图标都不起作用。当我打电话给他们时，他们根本不显示。没有错误消息。

我的代码如下：

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

如果我把图标="离子电子邮件"代表一个不同的符号，它工作得很好。

你能帮我找到问题吗？

Answer 1

怎么了

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

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

不幸的是，事实并非如此。我尝试手动添加该片段，但字体本身似乎还没有电子邮件未读图标。

解决方案

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

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

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

这应该解决您的问题，因为未读电子邮件图标不会显示。

备用解决方案

你会发现，电子邮件和电子邮件未读图标设计得不太好，因为未读版本是以全宽为中心的，包括信封角上的点，这会导致图标在从电子邮件更改为电子邮件未读时略有变化，反之亦然。

为了克服这个小小的麻烦，我建议在你的标签上使用徽章来表示未读的内容。这很简单，只需将badge="1"添加到ion-tab元素中即可指示1条未读消息。而且它看起来也更土气。这是和图片。