圖標未顯示在按鈕離子上

Question

嗨，我試圖將一個圖標放在我的離子項目中具有css類的按鈕之一上，但是當我這樣做時，該圖標未在此處顯示。 我下面有我的css和我的html /角度代碼，我試圖讓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-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>