src/pages/home/home.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<ion-header> <ion-navbar> <ion-title>Icons</ion-title> </ion-navbar> </ion-header> <ion-content text-center class="icons-basic-page"> <ion-row> <ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col> <ion-col><ion-icon name="logo-angular"></ion-icon></ion-col> <ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col> <ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col> <ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col> <ion-col><ion-icon name="people"></ion-icon></ion-col> <ion-col><ion-icon name="person"></ion-icon></ion-col> <ion-col><ion-icon name="contact"></ion-icon></ion-col> <ion-col><ion-icon name="apps"></ion-icon></ion-col> <ion-col><ion-icon name="lock"></ion-icon></ion-col> <ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col> <ion-col><ion-icon name="unlock"></ion-icon></ion-col> <ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col> <ion-col><ion-icon name="navigate"></ion-icon></ion-col> <ion-col><ion-icon name="pin"></ion-icon></ion-col> <ion-col><ion-icon name="locate"></ion-icon></ion-col> <ion-col><ion-icon name="mic"></ion-icon></ion-col> <ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col> <ion-col><ion-icon name="volume-up"></ion-icon></ion-col> <ion-col><ion-icon name="microphone"></ion-icon></ion-col> <ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col> <ion-col><ion-icon name="calculator"></ion-icon></ion-col> <ion-col><ion-icon name="bus"></ion-icon></ion-col> <ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col> <ion-col><ion-icon name="camera"></ion-icon></ion-col> <ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col> <ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col> <ion-col><ion-icon name="pin"></ion-icon></ion-col> <ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col> <ion-col><ion-icon name="arrow-back"></ion-icon></ion-col> <ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col> <ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col> <ion-col><ion-icon name="cloud"></ion-icon></ion-col> <ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col> <ion-col><ion-icon name="umbrella"></ion-icon></ion-col> <ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col> </ion-row> </ion-content> |
src/pages/home/home.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
page-home { .icons-basic-page { ion-icon { font-size: 50px; } ion-row { height: 100%; flex-wrap: wrap; } ion-col { flex: 0 0 25%; max-width: 25%; text-align: center; padding: 10px 5px; } } } |
บรรทัดที่ 4 : font-size
ไว้ปรับขนาดของ icon