图标不显示在按钮离子上

Question

您好，我正在尝试在我的 ionic 项目中的一个具有 css 类的按钮上放置一个图标，但是当我这样做时，该图标没有显示在下面，我的代码如下。我的 css 和我的 html/angular 代码在下面，我试图让 4 个按钮彼此相邻又漂亮又大，并有一个图标让它看起来不那么简单，但是当我这样做时它不会显示出来

谢谢 亚当·韦斯顿

a{
    text-decoration:none;
}

.buttontop{
    display:inline-block;
    padding:20px;
    height:120px;
    width:170px;
    text-align:center;
    background:white;
    color:white;
    font-size: 10px;
}

.active{
    background:#188171;
}

<ion-header>
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-card class="welcome-card">
      <ion-img src="/assets/shapes.svg"></ion-img>
      <ion-card-header>
        <ion-card-title>Welcome to ATAM</ion-card-title>
      </ion-card-header>
      <ion-card-content>
ATAM is the Original Learning Center for Everything Technology, Art, Music and Recording. We blend creativity with genius, and foster entrepreneurship.
 ATAM offers a huge variety of ways to learn through private instruction, group classes, advanced STEM/STEAM camps and through experimental game play.      
 </ion-card-content>
    </ion-card>

   <button  ion-button icon-start>
  <ion-icon name="star"></ion-icon>
  Parties
</button>
  <ion-button class="buttontop" expand="block">Sign up for Camp!
    <ion-icon name="star"></ion-icon>
  </ion-button>
<ion-button class="buttontop" expand="block">CreditCard Update</ion-button>
<ion-button class="buttontop" expand="block">Contact Us</ion-button>

<ion-card class="NewAtATAM">
  <ion-img src="/assets/newatatam.jpg"></ion-img>
  <ion-card-header>
   <ion-card-title>New At ATAM</ion-card-title>
</ion-card-header>
  </ion-card>

    <ion-card class="SignupforMusiclessons">
      <ion-img src="/assets/music.jpg"></ion-img>
      <ion-card-header>
        <ion-card-title>Sign Up For Music Lessons</ion-card-title>
        </ion-card-header>
      <ion-card-content>
acoustic - electric - music production - recording
ATAM Music Department teaches over 30 instruments, acoustic and digital, as well as music production and professional recording. Sign up now!
Private lessons are Monday through Saturday
12pm to 8pm
      </ion-card-content>
    <ion-button expand="block" color="dark" href="contact-us" >sign up</ion-button>
</ion-card>

    <ion-card class="Signupforsummercamp">
      <ion-img src="/assets/summercamp.jpg"></ion-img>
      <ion-card-header>
        <ion-card-title>Sign Up For Summer Camp</ion-card-title>
        </ion-card-header>
      <ion-card-content>
summer 2019 - tech- sports - art - music - field trips
Come experience ATAM Tech and Outdoor Summer Camp. The best of all worlds, combining tech, art, music, sports and field trips!
When: Monday-Friday, 8:30am to 3:30pm
June 10 - August 30
After Care Hours: 3:30 to 7:30.
      </ion-card-content>
      <ion-button expand="block" color="dark" href="camp">sign up</ion-button>
</ion-card>

<ion-card class="lessonsandclasses">
  <ion-img src="/assets/lessonsandclasses.jpg"></ion-img>
  <ion-card-header>
   <ion-card-title>Lessons and Classes</ion-card-title>
   <ion-button color="dark" expand="full" fill="solid" href="contact-us">Learn more about Private Lessons</ion-button>
</ion-card-header>
  </ion-card>

  <ion-card class="tech">
      <ion-img src="/assets/TECHSQUARE.jpg"></ion-img>
      <ion-card-header>
        </ion-card-header>
      <ion-card-content>
Robotics, Programming, Game Design, App Building, Website Design, Engineering, Architecture
      </ion-card-content>
      <ion-button expand="block" color="dark" href="contact-us">Start Learnig</ion-button>
</ion-card>

<ion-card class="music">
      <ion-img src="/assets/MUSICSQUARE.jpg"></ion-img>
      <ion-card-header>
        </ion-card-header>
      <ion-card-content>
30 Acoustic instruments, Music Production, Professional Recording Studios      </ion-card-content>
      <ion-button expand="block" color="dark" href="contact-us">Start Learning</ion-button>
</ion-card>

<ion-card class="art">
      <ion-img src="/assets/ARTSQUARE.jpg"></ion-img>
      <ion-card-header>
        </ion-card-header>
      <ion-card-content>
Traditional Art in all mediums, Digital Illustration using Industry Standard Software and Techniques      
</ion-card-content>
      <ion-button expand="block" color="dark" href="contact-us" >Start Learning</ion-button>
</ion-card>

<ion-list lines="none">
      <ion-list-header>
        <ion-label>Resources</ion-label>
      </ion-list-header>
      <ion-item href="parties">
        <ion-icon slot="start" color="medium" name="book"></ion-icon>
        <ion-label>Book A Party</ion-label>
      </ion-item>
      <ion-item href="camps">
        <ion-icon slot="start" color="medium" name="build"></ion-icon>
        <ion-label>Sign up For Summer Camp</ion-label>
      </ion-item>
      <ion-item href="regform">
        <ion-icon slot="start" color="medium" name="grid"></ion-icon>
        <ion-label>Registration Form</ion-label>
      </ion-item>
      <ion-item href="creditcard">
        <ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
        <ion-label>Credit Card Update Form</ion-label>
      </ion-item>
         <ion-item href="contact-us">
        <ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
        <ion-label>Contact US</ion-label>
      </ion-item>
    </ion-list>
</ion-content>

Answer 1

如果您想将这 4 个按钮排成一行，您应该使用 ion-row，将您的按钮放在各自的 ion-col 中。

另外，正确的语法是 <button ion-button></button> 而不是 <ion-button></ion-button>

<ion-row>

    <ion-col>
        <button  ion-button icon-start>
            <ion-icon name="star"></ion-icon>
            Parties
        </button>
    </ion-col>

    <ion-col>
        <button  ion-button icon-start class="buttontop" expand="block">
            <ion-icon name="star"></ion-icon>
            Sign up for Camp!
        </button>
    </ion-col>

   <!-- add rest of the buttons in their separate ion-col -->

</ion-row>