出了什么问题

Question

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

它是＆＃34; ion-email-unread＆＃34;不知何故，这多个其他图标不起作用。当我打电话给他们时，他们很简单。没有错误消息。

我的代码如下所示：

<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 =＆＃34; ion-email＆＃34;它代表一个不同的符号，它运作得很好。

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

Answer 1

出了什么问题

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

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

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

解决方案

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

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

的

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

应该解决您未发现的电子邮件未读图标的问题。

替代解决方案

你会发现有一件事是电子邮件和未发送电子邮件的图标设计得不是很好，因为未读版本的中心是基于包括信封角落点在内的整个宽度，这会导致图标略微移动当它从电子邮件更改为电子邮件未读时，反之亦然。

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

用户Ionicons电子邮件未读

1 个答案:

出了什么问题

解决方案

替代解决方案