html - 如何在 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-按钮 bu 使用父选择器。

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