如何在Ionic中排除某些CSS类/元素？

Question

我仍然可以保留并且不覆盖菜单后退图标的方法，我仍然可以显示我想要的图标（在本例中为科普特字母的字符）的方法是什么？您将能够在图像中看到，后面的图标没有显示。我希望从其余图标中排除此图标，以便在正确显示后退图标时仍可正确显示字符。

我已经尝试了

:not(ion-icon name="menu") {
}

但那并没有奏效。

HTML代码

<!--
  Generated template for the CopticLanguagePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
    <ion-navbar>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Coptic Language</ion-title>
    </ion-navbar>
  </ion-header>


<ion-content class="background">
    <ion-list>
        <ion-item>
          <ion-icon class="fa-alpha-upper" item-start></ion-icon>
            Alpha
          <ion-icon class="fa-alpha-lower" item-end></ion-icon>
        </ion-item>
        <ion-item>
            <ion-icon class="fa-beta-upper" item-start></ion-icon>
              Beta
            <ion-icon class="fa-beta-lower" item-end></ion-icon>
          </ion-item>
      </ion-list>


</ion-content>

SCSS代码

page-coptic-language {
    body, span, h1, h2, h3, h4, h5, h6, p, ion-icon,  {
        font-family: 'Coptic' !important
    }
}

感谢您的时间和耐心

• 新手开发

Answer 1

由于back是一个按钮而ionic为其添加了一个类back-button，您可以使用父选择器将css添加到back-button个。

<强> HTML

<ion-header class="coptic-font">
    <ion-navbar>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Coptic Language</ion-title>
    </ion-navbar>
  </ion-header>

<强>的CSS：

.coptic-font {
    .back-button      {
        font-family: 'inherit' !important // your css
    }
}