Привет, я пытаюсь поместить значок на одну из моих кнопок, которая имеет класс 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>