Question

您好，我试图在我的离子项目中的一个带有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>

图标未显示在按钮离子上

1 个答案: